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>}
</>
);
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