Query options behaving differently in v2

[ryanlntn]

I'm attempting to upgrade to v2 and I'm running into an issue with query options. I have a query that I'm defaulting to staleTime: Infinity and manually force refetching. Previously this worked as expected with data being present and no request made until manually refetched. I was already on the latest version of @tanstack/react-query and their docs describe this behavior so it appears something changed in connect-query within v2 to break this.

[paul-sachs]

Hey @ryanlntn Sorry to hear you're having trouble with the migration. Let me just lay out what I understand:

1. You have a component with a query, something like useQuery(someRpc, { ... }, { staleTime: Infinity)
2. The first time you mount the component, it fetches data (expected)
3. Something else is using the same query, which mounts and is triggering another fetch (unexpected)

I think that sums up the problem. If it doesn't, it might help to provide a minimum reproduction with exact behaviour and expectations.

The way query keys are built has changed quite a bit in V2 and now more accurately represents possible changes to underlying transport (middleware, baseURL, etc). So things like transport are now taken into account when generating unique keys. It's possible you were leveraging a bug on our side without knowing it.

One way you can tell for sure this is something that's happening is by calling something like

console.log(createConnectQueryKey({
  schema: someRpc,
  input: { ... },
  transport,
  cardinality: undefined,
})

If you notice that the produced object looks different between calls, it's likely because of transport. You'll want to key your transport with a consistent key that only changes when it needs to: const transport = addStaticKeyToTransport(createConnectTransport(...), "some-static-string"); as a way to make sure your transport isn't changing on every render or change.

[paul-sachs]

Note that using addStaticKeyToTransport should only be necessary if you are creating a transport at runtime and whose identity changes for every render. Most of the time, a transport is created at the module level and then connect-query handles the key automatically.

[ryanlntn]

@paul-sachs That makes sense and that was it. Updating to:

  const transport = addStaticKeyToTransport(createConnectTransport({ baseUrl, fetch }), "transport")

resolves this for me. Thanks!