Queries with additional parameter

[vineetdigit]

I am trying to understand how the additional parameters to the query string are used and for what purpose. Is the purpose of using additional parameters only for uniquely identifying the query in the devtools?

Following example passes {preview: true} option. And this very well could be replaced by string preview is true.

// And individual todo in a "preview" format
 useQuery(['todo', 5, { preview: true }], ...)
 // queryKey === ['todo', 5, { preview: true }]

Or are there instances where someone needs to construct a queryKey programmatically? What would be an example?

[TkDodo]

queryKeys are used to uniquely identify a query. react-query also triggers a refetch if a query key changes for a query. If preview goes from true to false, it would refetch. That's why query keys are often considered similar to dependency arrays of useEffect.

Or are there instances where someone needs to construct a queryKey programmatically? What would be an example?

if you want to invalidate a specific query, or want to do updates on a specific query with queryClient.setQueryData, you need to construct the query key.

[vineetdigit]

queryKeys are used to uniquely identify a query. react-query also triggers a refetch if a query key changes for a query. If preview goes from true to false, it would refetch. That's why query keys are often considered similar to dependency arrays of useEffect.

This is very powerful, and I hadn't realized this by reading the documentation until you explained this.

Thanks so much!!