query.invalidate()

[axelrindle]

We already have query.refetch(), why not add query.invalidate() ?

I have a scenario where a generic DataTable component accepts a UseQueryDefinedReturnType as a prop. There is a refetch button which calls query.refetch(). In some situations I'd like the DataTable to also invalidate the query, which is not possible, because the DataTable has no knowledge of the queries query key.

[ylc395]

I like this idea, too.

[TkDodo]

I don't fully understand the use-case. When the query is active (which it sounds like it is), invalidate will also refetch it so why not use refetch instead?

[ylc395]

so you have a disabled useQuery and then you want to pass an invalidate returned by it down to another component so that you can invalidate it ? Why not e.g. pass the queryKey down?

That's another question: How can I know the queryKey? Only the creator of query know the queryKey, but I'm just a consumer of the query, I have no knowledge of the queries query key(just like OP said). And @tanstack/query doesn't provide an API to get the queryKey of a query. see this discussion: #6752

[TkDodo]

@tanstack/query doesn't provide an API to get the queryKey of a query

I need to see some code of what you’re doing. The queryKey is the way to get the query. It’s hard to imagine you having the query, but not the key, because how did you get the query without the key?

I’m thinking it’s mostly:

function ComponentA() {
  const { data, refetch } = useQuery({
    queryKey: ['some', 'query', 'key'],
    queryFn: fetchIt
  })

  if (data) {
    return <ComponentB refetch={refetch} />
  }
}

now instead of passing refetch down, you could pass ['some', 'query', 'key'] down and use queryClient.invalidateQueries if you want invalidation.

Anyways, in the place where you create the query, you have the key, so you can always return that alongside the query:

const useMyQuery = () => {
  const queryKey = ['some', 'query', 'key']

  const query = useQuery({
    queryKey,
    queryFn: fetchIt
  })

  return { query, queryKey }
}

[ylc395]

I need to see some code of what you’re doing. The queryKey is the way to get the query. It’s hard to imagine you having the query, but not the key, because how did you get the query without the key?

Here is an example:

//  Vue component
<script setup lang="ts">
import BusinessService from '@my-company/business-service'; // This is a third-party package or a module, whose author is not me. So I can not touch the code inside

const service = new BusinessService();

watchEffect(() => {
  // service.asyncData is the return value of useQuery
  if (service.asyncData.data.value) {
    console.log(service.asyncData.data.value);
  }
})

// user clicks a button:
function handleClick() {
  service.asyncData.invalidate(); // not a valid invoking for now. I want to invalidate, not refetch this async data
}
</script>

[TkDodo]

seems like the 3rd party package would need to expose this to you then

[ylc395]

seems like the 3rd party package would need to expose this to you then

So please consider this: #6752