Best practice for query invalidation from a different component

[norswap]

Simple example: I read an ERC20 balance from one component. I have a token transfer form in another component. Whenever I send token I want the ERC20 balance to refetch.

Right now, the canonical solution seems to be to pass the refetch function from the balance read to the form. Easy pez if the transfer form is a child of the component doing the read. If they're siblings, it means moving the read to the common ancestor, which in some cases is pretty bad for code organization.

The ideal solution would be to have something like tanstack-query query keys to invalidate via a string identifier or symbol. But wagmi reserves the query key for internal use and doesn't seem to expose a similar functionality.

Is there a better way to do this than passing refetch? Probably reimplementing a query-key like mechanism on top of wagmi is the way (it's not that difficult), but I wanted to make sure there wasn't a better way. This seems like a super super super common use case.

[roninjin10]

The functions to generate query keys are not private https://github.com/wevm/wagmi/blob/main/packages/core/src/query/getBalance.ts

[tmm]

Check out the TanStack Query Guide in the Wagmi docs.

[norswap]

After mulling about this for a bit — it doesn't solve the fundamental issue, right? You get queryKey in a component A, you still have to route it to component B somehow.

Whereas when using tanstack-query directly, you can define your own key, meaning you can have a file that defines all your query keys and import it easily in different components.

Not the end of the world, you can put your query keys in a store when they get defined.

[norswap]

This provides a solution: https://wagmi.sh/react/guides/tanstack-query#example-after-user-interaction
Not the most ideal as if there was nothing to invalidate in the first place you're forced to do fetches anyway, but good enough for most use cases.

[tmm]

Query key invalidation is structural so you can tune invalidation to be broad or narrow depending on your use-case. For example:

import { getEnsNameQueryKey } from 'wagmi/query'

// Invalidate every query in the cache
queryClient.invalidateQueries()

// Invalidate every ENS name query
queryClient.invalidateQueries({ queryKey: getEnsNameQueryKey() })

// Invalidate every ENS name query on mainnet
queryClient.invalidateQueries({ queryKey: getEnsNameQueryKey({ chainId: 1 }) })

// Invalidate every ENS name query on mainnet with address
queryClient.invalidateQueries({
  queryKey: getEnsNameQueryKey({
    address: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e',
    chainId: 1,
 }),
})

The TanStack Query docs on Query Invalidation go into this in depth.

[norswap]

Nice, we had found the getQueryKey but did not know it was structural. That's very neat.