Do I need to make this object part of the query key? (Expected stable)

[florianwalther-private]

TanStack's Linter is telling me to add the wixClient to this query key:

const wixClient = useWixClient();

const {
  data,
  ...
} = useInfiniteQuery({
  queryKey: ["orders", "member-data"],
  queryFn: async ({ pageParam }) => getUserOrders(wixClient, pageParam),
  ...
});

I understand why; if the wixClient changes we want to fetch again.

But:

• The Wix client is initialized once in the root layout, synchronously, and never changes
• The Wix client is a complex object that adds a lot of "gibberish" to the query key

Can I ignore this Lint warning here or do you suggest adhering to it?

[TkDodo]

do you have to create the wix client inside the react scope and then use it via a hook? If you create it outside the react lifecycle and just import it, it's seen as stable. We can't know what's stable when it comes from a custom hook. Otherwise, we'd need to add some sort of whitelist, which we've tried to avoid

[florianwalther-private]

Thank you for your answer!

do you have to create the wix client inside the react scope

I'm not sure. Initializing it at the module level seems to work but all examples I've seen online use a context provider 🤔 I have to clarify this.

If I need to get it from context, do you suggest that I add it to the queryKey or disable this rule for this key?

[TkDodo]

we have been talking about an allowList before, @Newbie012 I think we could re-evaluate that idea. There is often the need to have like an const api = useApi() hook that initializes the api once, within the react render cycle. It doesn't make much sense to not allow using the api inside the queryFn.

Further, we also allow the queryClient from useQueryClient, but it suffers the same problem. It's "usually" stable, but it could also get re-created during render (edge cases, but still possible).

With an allowList, we could default to allowing the queryClient, but it would be extensible by users ...