TanStackT
TanStack3y ago
79 replies
sad-indigo

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} />


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.
Was this page helpful?