rare-sapphire

Query not being invalidated

  const key = 'paginatedListings'

  //Query
  const { data, isLoading, isError, error } = useQuery({
    queryKey: [key],
    queryFn: async (e) => {
      // Can confirm this console log does not run after mutation onSuccess
      console.log('querying', e)
      return await fetchPaginatedListings({ queryKey: [key, 1, 10] })
    },
  })

  //Mutation
  const mutation = useMutation({
    mutationFn: (newTodo: string) => {
      return postSearchTerm(newTodo)
    },
    onSuccess: async (data) => {
      console.log('Data received:', data)
      await queryClient.invalidateQueries({ queryKey: [key, 1, 10] })
      // await queryClient.invalidateQueries()
    },
    onError: (error) => {
      console.error('Error:', error)
    },
  })

    //Mutation.mutate is passed as props to a child component
     <HomepageSearchForm mutate={mutation.mutate} />

  const key = 'paginatedListings'

  //Query
  const { data, isLoading, isError, error } = useQuery({
    queryKey: [key],
    queryFn: async (e) => {
      // Can confirm this console log does not run after mutation onSuccess
      console.log('querying', e)
      return await fetchPaginatedListings({ queryKey: [key, 1, 10] })
    },
  })

  //Mutation
  const mutation = useMutation({
    mutationFn: (newTodo: string) => {
      return postSearchTerm(newTodo)
    },
    onSuccess: async (data) => {
      console.log('Data received:', data)
      await queryClient.invalidateQueries({ queryKey: [key, 1, 10] })
      // await queryClient.invalidateQueries()
    },
    onError: (error) => {
      console.error('Error:', error)
    },
  })

    //Mutation.mutate is passed as props to a child component
     <HomepageSearchForm mutate={mutation.mutate} />

Hi all, I'm completely hard stuck on this one. I hope the provided code gives enough info. As the title suggests, queryClient.invalidateQueries with matching querykey does not actually cause the query to refetch. I also tried the invalidate all with no filter and that does not work either. Anyone might have any ideas? Thank you in advance.

48 Replies

correct-apricot•2y ago

I believe the issue is that your useQuery does not have the same queryKey as the one you invalidate in your onSuccess Either do invalidateQueries({queryKey: [key]}) or queryKey: [key, 1, 10]

rare-sapphireOP•2y ago

const queryClient = useQueryClient()
  const key = 'paginatedListings'
  const { data, isLoading, isError, error } = useQuery({
    queryKey: [key],
    queryFn: async (e) => {
      console.log('querying', e)
      return await fetchPaginatedListings({ page: 1, limit: 10 })
    },
  })
  const mutation = useMutation({
    mutationFn: (newTodo: string) => {
      return postSearchTerm(newTodo)
    },
    onSuccess: async (data) => {
      console.log('Data received:', data)
      await queryClient.invalidateQueries({ queryKey: [key] })
      // await queryClient.invalidateQueries()
    },
    onError: (error) => {
      console.error('Error:', error)
    },
  })

const queryClient = useQueryClient()
  const key = 'paginatedListings'
  const { data, isLoading, isError, error } = useQuery({
    queryKey: [key],
    queryFn: async (e) => {
      console.log('querying', e)
      return await fetchPaginatedListings({ page: 1, limit: 10 })
    },
  })
  const mutation = useMutation({
    mutationFn: (newTodo: string) => {
      return postSearchTerm(newTodo)
    },
    onSuccess: async (data) => {
      console.log('Data received:', data)
      await queryClient.invalidateQueries({ queryKey: [key] })
      // await queryClient.invalidateQueries()
    },
    onError: (error) => {
      console.error('Error:', error)
    },
  })

ah yea good catch but still not working! I also did try invalidateQueries with no filter and that does not work either.

correct-apricot•2y ago

Does refetchQueries work? invalidate should work here but worth a shot

rare-sapphireOP•2y ago

sure, let me try that out Still nothing, super weird! I do get the console log from onSuccess with the new data i also tried refetchqueries with no filter

correct-apricot•2y ago

Super odd indeed Do you have the query dev tools? It seems your query is not being stored in the cache Any special options being passed to the new QueryClient()?

rare-sapphireOP•2y ago

Ah you know what, a bit of extra detail: I'm using a monorepo setup, the file where useMutatino is passes .mutate to a ui component in an inmported package would that cause an issue?

rare-sapphireOP•2y ago

the screen is in app, the form component that gets passed .mutate is in ui

correct-apricot•2y ago

Ok so the form in ui calls .mutate?

rare-sapphireOP•2y ago

yes

correct-apricot•2y ago

But all the hooks are declared in app?

rare-sapphireOP•2y ago

yes

correct-apricot•2y ago

Does ui have its own QueryClient? I'm guessing not but just asking.

rare-sapphireOP•2y ago

nope!

correct-apricot•2y ago

What about this?

rare-sapphireOP•2y ago

  const queryClient = useQueryClient()

  const queryClient = useQueryClient()

correct-apricot•2y ago

I mean in the QueryClient provider

rare-sapphireOP•2y ago

<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

  const queryClient = new QueryClient()

  const queryClient = new QueryClient()

nada

correct-apricot•2y ago

Ah Welp my brain wheels are spinning

rare-sapphireOP•2y ago

🤔 let me get dev tools setup

correct-apricot•2y ago

Sure. Can you also try console.log(queryClient.getQueryCache()) in your onSuccess I wonder if that query even shows up in there

rare-sapphireOP•2y ago

QueryCache {listeners: Set(0), config: {…}, #queries: Map(0), subscribe: ƒ}
config
: 
{}
listeners
: 
Set(0) {size: 0}
subscribe
: 
ƒ ()
#queries
: 
Map(0)
[[Prototype]]
: 
Subscribable

QueryCache {listeners: Set(0), config: {…}, #queries: Map(0), subscribe: ƒ}
config
: 
{}
listeners
: 
Set(0) {size: 0}
subscribe
: 
ƒ ()
#queries
: 
Map(0)
[[Prototype]]
: 
Subscribable

correct-apricot•2y ago

Ok this explains a lot There are literally no queries in the cache How does that even happen lol

rare-sapphireOP•2y ago

if i have to guess

correct-apricot•2y ago

Is there like a queryClient.clear() being called anywhere?

rare-sapphireOP•2y ago

the uh nothing in search

correct-apricot•2y ago

What if you console log this in the queryFn itself?

rare-sapphireOP•2y ago

https://github.com/tamagui/starter-free/blob/main/packages/app/provider/index.tsx

GitHub

starter-free/packages/app/provider/index.tsx at main · tamagui/star...

Tamagui React Native Starter Repo - Next, Expo, Solito - tamagui/starter-free

rare-sapphireOP•2y ago

so that's the repo im using i assume the way the providers are being applied to the app breaks...things... trying

correct-apricot•2y ago

Oh it's on react native. I'm guessing devtools won't work on mobile

rare-sapphireOP•2y ago

im running the web version ill platform it out for mobile

querying 
{queryKey: Array(1), meta: undefined}
meta
: 
undefined
queryKey
: 
['paginatedListings']
signal
: 
(...)
get signal
: 
() => {…}
length
: 
0
name
: 
"get"
arguments
: 
(...)
caller
: 
(...)
[[FunctionLocation]]
: 
query.js:154
[[Prototype]]
: 
ƒ ()
[[Scopes]]
: 
Scopes[4]
[[Prototype]]
: 
Object

querying 
{queryKey: Array(1), meta: undefined}
meta
: 
undefined
queryKey
: 
['paginatedListings']
signal
: 
(...)
get signal
: 
() => {…}
length
: 
0
name
: 
"get"
arguments
: 
(...)
caller
: 
(...)
[[FunctionLocation]]
: 
query.js:154
[[Prototype]]
: 
ƒ ()
[[Scopes]]
: 
Scopes[4]
[[Prototype]]
: 
Object

ok so the query is there in the original queryfn

correct-apricot•2y ago

My other guess is that a provider above your QueryClient provider is re-rendering everything , which is creating a new query client instance. Try consoling logging just the queryClient once in the queryFn, and once in the onSuccess. Then in your browser console, you can right click them and click 'save as global variable' Then just compare references to see if they're different

rare-sapphireOP•2y ago

oh and the dev tools shows 0 queries after data loaded big yikes? trying the logging brb

rare-sapphireOP•2y ago

well guess that answers the question

correct-apricot•2y ago

Ok ya Something is recreating your QueryClient Time to pull out react devtools to see wtf is re-rendering

rare-sapphireOP•2y ago

can i wrap the component in queryClient instead of the entire app?

correct-apricot•2y ago

Don't think that'll fix your issue since something at a higher level is re-rendering your app

rare-sapphireOP•2y ago

got it

correct-apricot•2y ago

Is your new QueryClient() being called inside a component or in the global scope?

rare-sapphireOP•2y ago

In a component

correct-apricot•2y ago

Move to global and try again

rare-sapphireOP•2y ago

omg

rival-black•2y ago

You should use the ESLint plugin. It would catch issues like that: https://tanstack.com/query/latest/docs/react/eslint/eslint-plugin-query

ESLint Plugin Query | TanStack Query Docs

TanStack Query comes with its own ESLint plugin. This plugin is used to enforce best practices and to help you avoid common mistakes. Installation

rare-sapphireOP•2y ago

gimme a hug c'mere @aadit that worked

correct-apricot•2y ago

glad to help

rare-sapphireOP•2y ago

https://tenor.com/view/facepalm-the-huxtables-raven-simone-the-cosby-show-gif-9140688

Tenor

correct-apricot•2y ago

And I highly second using the Eslint plugin

rare-sapphireOP•2y ago

i do have it installed let me double check @troywoy ty

Gaming

Programming

Query not being invalidated

Did you find this page helpful?