Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Query invalidation doesn't work

See original GitHub issue

Provide environment information

  System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 93.61 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.8.0 - ~/.nvm/versions/node/v18.8.0/bin/node
    Yarn: 3.2.3 - ~/.nvm/versions/node/v18.8.0/bin/yarn
    npm: 8.18.0 - ~/.nvm/versions/node/v18.8.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 103.0
    Safari: 16.0
  npmPackages:
    @trpc/client: 10.0.0-proxy-alpha.76 => 10.0.0-proxy-alpha.76
    @trpc/next: 10.0.0-proxy-alpha.76 => 10.0.0-proxy-alpha.76
    @trpc/react: 10.0.0-proxy-alpha.76 => 10.0.0-proxy-alpha.76
    @trpc/server: 10.0.0-proxy-alpha.76 => 10.0.0-proxy-alpha.76
    next: 12.3.0 => 12.3.0
    react: 18.2.0 => 18.2.0

Describe the bug

Using the .invalidate() method on a query doesn’t seem to actually invalidate the query. However using React Query’s native queryClient.invalidateQueries() works fine.

To reproduce

This seems to not work:

const utils = trpc.useContext()
const {data} = trpc.user.getAll.useQuery()

const addUser = trpc.user.create.useMutation({
  onSuccess: async () => {
    await utils.user.getAll.invalidate() // Not invalidating the query
  },
})

const onAddUser: SubmitHandler<User> = async (data) => {
  addUser.mutate(data)
}

but this does (using native React Query queryClient):

const queryClient = useQueryClient()
const {data} = trpc.user.getAll.useQuery()

const addUser = trpc.user.create.useMutation({
  onSuccess: async () => {
    queryClient.invalidateQueries([`user.getAll`]) // Works
  },
})

const onAddUser: SubmitHandler<User> = async (data) => {
  addUser.mutate(data)
}

Additional information

No response

👨‍👧‍👦 Contributing

🙋‍♂️ Yes, I’d be down to file a PR fixing this bug!

Issue Analytics

State:
Created a year ago
Comments:8 (5 by maintainers)

Top GitHub Comments

2reactions

xiaoyu-tamucommented, Sep 21, 2022

Do you have duplicate QueryClientProvider in your app?

I’m migrating an existing project to trpc and forgot to remove the QueryClientProvider in my _app.ts. It works like a charm after i remove QueryClientProvider

0reactions

KATTcommented, Sep 26, 2022

Closing for now, re-open if it’s experienced again or if you can supply a reproduction. We should have tests that cover this behavior.

Top Results From Across the Web

Invalidate queries doesn't work [React-Query] - Stack Overflow

The query will ignore query client invalidateQueries and refetchQueries calls that would normally result in the query refetching. Share.

Using cached query results | BigQuery - Google Cloud

All query results, including both interactive and batch queries, are cached in temporary tables for approximately 24 hours with some exceptions. Limitations.

Struggling with query invalidation · Discussion #2104 - GitHub

Hey! I am running into undesired UI states when trying to invalidate queries. The issue appears to be particularly with the infinite queries....

Query Invalidation | TanStack Query Docs

When a query is invalidated with invalidateQueries , two things happen: It is marked as stale. This stale state overrides any staleTime configurations...

Is the overhead of frequent query cache invalidation ever ...

The query is not cacheable, either because it contains a nondeterministic construct (such as CURRENT_DATE) or because its result set is too ...