尝试在没有互联网连接的情况下使用 tRPC 和 T3 堆栈进行编码

Question

What about tRPC or the T3 stack breaks when trying to code offline? My console.log gets called when online, but when I try to code offline the procedure doesn't get called.

router.ts

    export const exampleRouter = router({
      hello: publicProcedure
        .input(z.object({ text: z.string().nullish() }).nullish())
        .query(({ input }) => {


          console.log("WHY DON'T I GET CALLED WHEN OFFLINE???");


          return {
            greeting: `Hello ${input?.text} `,
          };
        }),
    });


index.tsx:

  const hello = trpc.example.hello.useQuery({ text: "World" });

  return (
      <>     
        ...
        {hello.data ? <p>{hello.data.greeting}</p> : <p>Loading..</p>}
      </>
  );

Answer 1

tRPC does not directly call your procedure like a function, it's just an additional layer around your API calls that provides amazing DX and typing based on your procedure definitions. In reality it's still making a network request to your procedure, so if you're offline that's not going to happen.

Since the tRPC client uses React Query under the hood, you can take advantage of caching and RQ's offline capability, but you're still not going to be able to hit your endpoint when offline.

Answer 2

J. Sheets' answer pointed me in the right direction. There was a simple fix:

 const hello = trpc.example.hello.useQuery(
    { text: "from tRPC" }
    { networkMode: "always" } <== the fix
  );

More info: https://tkdodo.eu/blog/offline-react-query https://tanstack.com/query/v4/docs/react/guides/network-mode