Ensuring Data Refetch After Creating an Item in React Query

[cunning loom]

Invalidate the query

[rotund plume]

But why since i use the enabled as , enabled: !!someValue, the somevalue is not true when im in the form component.

[cunning loom]

That’s not how it works

[rotund plume]

Could you explain how it works?

[rotund plume]

If my queryKey looks like ["item" , "someValue"], someValue is what trigger the query, when i invalide the query should i pass the same querykey and it will work?

[stuck cloud]

You can still invalidate disabled query.

[stuck cloud]

Yes, correct.

You can also just pass ["item"] to invalidate all queries that match this key.

[rotund plume]

Ok i was understanding it as when i leave the "list" component the query is disabled and it wont work, i read somewhere invalidate dosent work with enabled or is it just when i do enabled:false?

and in my case i use dependent query, enabled: !!someValue

[stuck cloud]

Iirc 'enabled' controls if mounted query should attempt to fetch if it's stale. That's all.

If you could show some code that would help.

[rotund plume]

Ok this is the component that fetch the data and render it, setupId is from context,

  const { setupId, setSetupId } = useGlobalStateContext();
  const { data: allEsBySetupId } = useFetchAllEsBySetupId(setupId);

the query:

  return useQuery({
    queryKey: ["allEsBySetupId", setupId],
    queryFn: () => fetchAllEsBySetupId(setupId),
    enabled: !!setupId
  });
}

and in the form component that is in another route i just do this:

       queryClient.invalidateQueries({ queryKey: ["allEsBySetupId"] });

what i was thinking it will be disabled and not work when i leaved the component that fetches the data

the docs says like this :

When enabled is false:
The query will ignore query client invalidateQueries and refetchQueries calls that would normally result in the query refetching.

i consider the enabled to be false when i leave the component since its not mounted and not pass the id to the query, or is it just when the enabled is set to enabled:false it will ignore invalidateQueries?

[stuck cloud]

I think it should just work? That's what docs say about "enabled":

Set this to false to disable this query from automatically running.

I don't see a reason why your query won't refetch when you go back to the list. It doesn't refetch for you?

[rotund plume]

it does since i have refetchonmount to true wich is default, but if i set that to false it wont refetch when invalidate, and i try to understand will the query only ignore invalidate when it permanently dissabled?

[stuck cloud]

I think you're confusing between invalidate and refetching. Invalidation doesn't mean queries will refetch. Only those queries that are active (mounted) will.

I recommend you shouldn't bother with refetchOnMount and leave it true which is default.

[rotund plume]

if i invalidate a query it become stale and will refetch on next mount right?

[stuck cloud]

Yes that's correct

[rotund plume]

ok but still the enabled will ignore invalidate if enabled:false, this means permanent disabled, but in my case enabled:!!id, will it not ignore the validation there?

[stuck cloud]

Or it will refetch immediately if you have this query already mounted

I don't think it ignores invalidation even if it's disabled. Have you checked state of the query in query dev tools?

I'm not 100% sure though

[rotund plume]

will do that, and i never det refetchOnMount:false but someone did i this project🤣 im pretty sure its true by default for a reason

[stuck cloud]

Default staletime is also 0, which means query becomes stale immediately

[rotund plume]

https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries here i read about it will ignore invalidate

[stuck cloud]

Yeah, I think it's available for some corner cases. Probably function version of refetchOnMount is way more useful.

[stuck cloud]

Oh interesting. I guess what docs mean in this scenario: if your query is mounted and disabled, invalidation won't trigger refetch.

[rotund plume]

thats what i meant should i invalidate or not cause it do refetch anyway

i mean it refetch on mount when im navigating back to the component the render the data

[stuck cloud]

I recommend you still invalidate. For example your list component evolve and and will be mounted together with form?

By invalidating you're being explicit saying "this data is no longer accurate and should be refetched when accessed next time

[rotund plume]

yes is see no possible issues with invalidate it

[stuck cloud]

For example your list query may also set non default staleTime which will keep it fresh. Then going back to list wont refetch if it's still fresh

[rotund plume]

yes maybe its a good "backup" to always invalidate

[stuck cloud]

Invalidating in form will make it stale

[rotund plume]

do u ever change any default options values like refetchOnWindowFocus etc?

[stuck cloud]

Yup, basically you're separating concerns. Form made a mutation - invalidate cached data.

[rotund plume]

i really love seperating concerns so sounds good🙏🏻

[stuck cloud]

No, not really. I think staleTime is better option when you need to control refetching.

Refetching on window focus is actually GOAT in my opinion

Especially after it was improved so that it doesn't refetch when focus moves between devtools and the body

[rotund plume]

i found a bunch of changed options in this project i set all to default and now things that didnt work actually works

[stuck cloud]

Awesome. I agree that Query defaults work really well in common scenarios.

[rotund plume]

thanks for ur help, react query is awesome and have so much functionality but its alot to learn

[stuck cloud]

You're welcome! I'm actually not a react dev but Vue

Query fits so nicely. It's mind blowing it's not talked more as a great way to manage async server state.