Trying to code using tRPC and T3 stack with no internet connection

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

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

Answer 2

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.