useQuery wrapper calls API twice

[pedropmedina]

I'm not sure if anyone else is experiencing this issue, but I have tried several solution and nothing works. It seems as if the useQuery wrapper makes two calls over the network. This issue is NOT present when using react-query's native useQuery hook and calling the api with the ts-rest regular client as the queryFn.

Here's what I'm seeing

export const api = initQueryClient(contract, {
 baseUrl: `${process.env.NEXT_PUBLIC_AUTH_API_URL}`,
 jsonQuery: true,
 baseHeaders: {},
 credentials: 'include',
 
 //  This makes two calls
   const { data, isInitialLoading } = api.application.findMany.useQuery(QUERY_KEY, {
   query: { take: 100 },
 });

// This one makes a single call
 const { data, isInitialLoading } = useQuery({
   queryKey: QUERY_KEY,
   queryFn: async () => {
     const res = await api.application.findMany.query({ query: { take: 100 } });
     return res.status === 200 ? res : null;
   },
 });
});

[michaelangeloio]

@pedropmedina is it possible for you to provide a minimal repo for us to reproduce the behavior?

[danielpza]

perhaps this is caused by react strict mode on development? https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development

[pedropmedina]

You are right @danielpza . The issue was strict mode. I'm using NextJs and turning it off got rid of the problem. However, doing so is not recommended. I'm not sure why this happens with the ts-rest wrapper and not when using react-query's native useQuery? Any thoughts?

[kurdin]

@pedropmedina
maybe this can help to explain it
facebook/react#24502 (comment)

[pedropmedina]

I get what React is doing with strict mode @kurdin. I just don't understand why the ts-rest wrapper around react-query's userQuery is causing double fetching when this issue was already addressed by react-query's useQuery itself. In order words, using native useQuery triggers a single request while ts-rest's implementation triggers two. I think there's something in that helper that must be improved to avoid this behavior. At the end of the day, aren't we just calling native useQuery under the hood?

[kurdin]

You right @pedropmedina. I'll try to use ts-rest with react query to investigate this behaviour.

[oliverbutler]

Yeah, this is bizarre! We really do just return the underlying useQuery function with a provided queryFn - @michaelangelo-io any ideas or shall we write a test to investigate?

[michaelangeloio]

@pedropmedina given the comments on this, TanStack/query#3492
do you see if the first request is aborted or not?

[pedropmedina]

That's what I was expecting @michaelangelo-io, however both request go through the network successfully as shown in the image above ^. The weird thing is that this only happens when using ts-rest wrapper. Native useQuery works as expected.

[Talent30]

@pedropmedina @kurdin Hi, there. I am happy to have a look if you can provide a minimal repo to reproduce the behaviour.