foreign-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

extended-salmon•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]

foreign-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.

extended-salmon•2y ago

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

foreign-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

extended-salmon•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()?

foreign-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?

foreign-sapphireOP•2y ago

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

extended-salmon•2y ago

Ok so the form in ui calls .mutate?

foreign-sapphireOP•2y ago

yes

extended-salmon•2y ago

But all the hooks are declared in app?

foreign-sapphireOP•2y ago

yes

extended-salmon•2y ago

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

foreign-sapphireOP•2y ago

nope!

extended-salmon•2y ago

What about this?

foreign-sapphireOP•2y ago

  const queryClient = useQueryClient()

  const queryClient = useQueryClient()

extended-salmon•2y ago

I mean in the QueryClient provider

foreign-sapphireOP•2y ago

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

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

  const queryClient = new QueryClient()

  const queryClient = new QueryClient()

nada

extended-salmon•2y ago

Ah Welp my brain wheels are spinning

foreign-sapphireOP•2y ago

🤔 let me get dev tools setup

extended-salmon•2y ago

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

foreign-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

extended-salmon•2y ago

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

foreign-sapphireOP•2y ago

if i have to guess

extended-salmon•2y ago

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

foreign-sapphireOP•2y ago

the uh nothing in search

extended-salmon•2y ago

What if you console log this in the queryFn itself?

foreign-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

foreign-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

extended-salmon•2y ago

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

foreign-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

extended-salmon•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

foreign-sapphireOP•2y ago

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

foreign-sapphireOP•2y ago

well guess that answers the question

extended-salmon•2y ago

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

foreign-sapphireOP•2y ago

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

extended-salmon•2y ago

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

foreign-sapphireOP•2y ago

got it

extended-salmon•2y ago

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

foreign-sapphireOP•2y ago

In a component

extended-salmon•2y ago

Move to global and try again

foreign-sapphireOP•2y ago

omg

adverse-sapphire•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

foreign-sapphireOP•2y ago

gimme a hug c'mere @aadit that worked

extended-salmon•2y ago

glad to help

foreign-sapphireOP•2y ago

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

Tenor

extended-salmon•2y ago

And I highly second using the Eslint plugin

foreign-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?