bug: Seems tRPC (or its config) doesn't work when internet is off on local machine?

[sdoxsee]

Provide environment information

npx envinfo --system --binaries

  System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 589.69 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm

ct3a from package.json

  "ct3aMetadata": {
    "initVersion": "6.10.0"
  }

Describe the bug

tRPC hangs on the hello endpoint. I just get Loading tRPC query...

I don't see an error but no success either.

To reproduce

Start up a freshly generated app (npm run dev) without the internet, open http://localhost:3000, I just get Loading tRPC query....

Additional information

Turning on the internet solves this. Does something require the internet? There are many times that I work offline and this prevents progress.

[ronanru]

Just tested it, it works as expected. I'm using Linux and the same ct3a version. Tried both node v19 and v16.

[AyanavaKarmakar]

Can reproduce on Windows 10.

"ct3aMetadata": {
    "initVersion": "6.10.0"
  }

[sdoxsee]

Thanks @ronanru and @AyanavaKarmakar. I tried it on Ubuntu and it worked fine as well. Seems like MacOS and Windows?

[needim]

seems related to: https://tanstack.com/query/v4/docs/guides/network-mode

Since React Query is most often used for data fetching in combination with data fetching libraries, the default network mode is online.

In this mode, Queries and Mutations will not fire unless you have network connection. This is the default mode. If a fetch is initiated for a query, it will always stay in the state (loading, error, success) it is in if the fetch cannot be made because there is no network connection. However, a fetchStatus is exposed additionally.

you can modify the behaviour via changing react-query's networkMode configuration src/utils/trpc.ts

export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      queryClientConfig: {
        defaultOptions: {
          queries: {
            networkMode:
              process.env.NODE_ENV === "development" ? "always" : "online",
          },
        },
      },
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

[needim]

If you want also mutations to run:

...
queries: {
  networkMode:
    process.env.NODE_ENV === "development" ? "always" : "online",
},
mutations: {
  networkMode:
    process.env.NODE_ENV === "development" ? "always" : "online",
},
...

[needim]

But, if you wanna develop an offline UX, you should revert it back.

[sdoxsee]

Thanks @needim. That definitely works for me.

Should that be the default for both queries and mutations in create-t3-app? An offline UX wouldn't be the most common scenario.

It also baffles me why those default react-query settings don't seem to affect Linux (or Ubuntu).

[c-ehrlich]

I didn't know about this behaviour in tRPC either. But I don't think we should override the default behaviour as that would break peoples expectations.

[needim]

@c-ehrlich it is not a tRPC behavior actually. It is @tanstack/react-query configuration. (since tRPC uses react-query under the hood it looks like that) I agree with you about not changing the default behavior. 👍

and I have no idea about this nor do I have a Linux to test this.

It also baffles me why those default react-query settings don't seem to affect Linux (or Ubuntu).

developers should handle network situations like this.

[sdoxsee]

Sounds good. Glad we can at least capture this issue so that other devs can see the solution. Thanks for all your help.