0

I'm trying out react-query on a NextJS project but somehow I can't control when it runs (partially). No request goes out but it still shows up as an entry on the react-query dev tools:

const { data, status } = useQuery({
  queryKey: ['user', userId],
  queryFn: getUserInfo,
  enabled: !!userId
});

What I'm doing here is enabling this query only when the userId has a value. It does work in a sense because no request comes out but when looking at the dev tools for react-query, I see a query key with ['user', null] and then another entry with a query key of ['user', '1234'].

Edit

It is marked as inactive so I may just be worried about nothing but I don't think it should show up as an entry in the list of queries inside of the dev tool. Is it possible to not have it show up if it doesn't run?

dokgu
  • 4,957
  • 3
  • 39
  • 77
  • I copied this line from my old project `useQuery(['user', id], () => getUser(id), { enabled: !!id })` Can you try changing it like this `queryFn: () => getUserInfo(userId)` – Sanka Sanjeewa Apr 26 '23 at 03:40
  • 1
    As you noted, it doesn't actually send the request, so there's no reason to worry. There's no real way to erase it from the list generated by react-query-devtools, and I wouldn't worry about it. The devtools list is just all of the different queryKeys it has seen while the Provider has been alive. The `['user', null]` entry is probably from however `userId` is being initialized, and then it gets changed to its proper value later on in rendering, but if it's not firing improperly then this isn't an issue, really. – toki Apr 26 '23 at 05:50

1 Answers1

1

Don't worry about the entry in the devtools. Your code looks correct, the query is always created and added to the QueryCache.

TkDodo
  • 20,449
  • 3
  • 50
  • 65