afraid-scarlet

Looking for a quick review, first time using Tanstack Query - React

Here is the file: https://github.com/lwears/word-synonyms/blob/refactor-use-react-query/frontend/src/Form.tsx Would be nice to get a review to see if i am doing things correctly. Thanks in advance

GitHub

word-synonyms/frontend/src/Form.tsx at refactor-use-react-query · l...

Simple Full Stack Application for matching words to their synonyms - lwears/word-synonyms

14 Replies

rising-crimson•14mo ago

No need to call resetQueries in your queryFns

rising-crimson•14mo ago

I'd also expect to see the synonym in your queryKey for queryGetWordsForSynonym. Simply updating it will refetch for you. Check dependent queries here: https://tanstack.com/query/latest/docs/framework/react/guides/dependent-queries

Dependent Queries | TanStack Query React Docs

useQuery dependent Query Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the enabled option to tell a query when it is ready to run:

afraid-scarletOP•14mo ago

i call that to clear the data for any other query, otherwise i get 2 sets of data I only want 1 of these to render at a time

 {queryGetWordsForSynonym.data && (
            <SynonymWithWords {...queryGetWordsForSynonym.data} />
          )}
          {queryGetSynonyms.data && (
            <WordWithSynonyms {...queryGetSynonyms.data} />
          )}

 {queryGetWordsForSynonym.data && (
            <SynonymWithWords {...queryGetWordsForSynonym.data} />
          )}
          {queryGetSynonyms.data && (
            <WordWithSynonyms {...queryGetSynonyms.data} />
          )}

rising-crimson•14mo ago

Using dependent queries properly will handle that for you You can also use gcTime: 0 if you want data removed immediately

afraid-scarletOP•14mo ago

Can i ask why for this? just for understanding

rising-crimson•14mo ago

It's how dependent queries work. If you have ['foo'] and ['foo', foo] as a dependent query it will refetch automatically, you can use enabled: Boolean(foo) to pause it, etc You're trying to implement things that are baked into RQ

afraid-scarletOP•14mo ago

are we talking about useQueries here? or useQuery?

afraid-scarletOP•14mo ago

This is what i am trying to avoid. and also i don't want the query to be run unless the button is clicked

afraid-scarletOP•14mo ago

also i don't want any automatic refetching only when button is clicked

afraid-scarletOP•14mo ago

this is the functionality i am trying to mimic

afraid-scarletOP•14mo ago

or achieve and thats what happens currently

rising-crimson•14mo ago

Then use enabled: false and refetch() https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries Anything used in your queryFn is supposed to be a part of your queryKey. If you were using this eslint plugin it would've complained about that: https://tanstack.com/query/latest/docs/eslint/exhaustive-deps

afraid-scarletOP•14mo ago

and this is what i was doing already ive spent some time on this now and im sorry but i don't understand If i do any of the things you suggested it no longer works as intended. either the query is run automatically which i don't want or something runs and immediately clears the data

rising-crimson•14mo ago

This is probably worth the read: https://tkdodo.eu/blog/effective-react-query-keys

Effective React Query Keys

Learn how to structure React Query Keys effectively as your App grows

Gaming

Programming

Looking for a quick review, first time using Tanstack Query - React

Did you find this page helpful?