Getting queryKey and meta from UseQueryResult

[ryanmk54]

I found the meta option on useQuery options. I thought this would be a great place to store the text I want to show the user while a query is loading.

Previously, I had a hook where I pass in an array of queries and their names. Something like:
const queryStatus = useQueryStatus({queries, queryNames})
Where queryStatus would either show an error, s loading spinner, or null if the data returned successfully.

I thought I could move the name into meta, which would remove the need to pass it in as a separate prop. The documentation says, "It will be accessible wherever the query is available". meta is shown in the devtools, but I am unable to access it on the return value from useQuery. I thought maybe I could pull meta out of the query cache, but the query key is also not available in UseQueryResult.

This makes me wonder. Is there a way to get the key or meta from the query result? Maybe I am thinking about this the wrong way. Is there a better way to pass data with the query result, or do I need a separate object?

[TkDodo]

key and meta are part of the query input, not the output. For your use-case, I’d suggest placeholderData.

[ryanmk54]

Here is my current flow:

1. A search for lions is performed
2. One of the search results are edited.
   • That search result may no longer belong in the current search.
   • The result should stay visible until another search is made.
   • All inactive searches are removed and the active one is invalidated.
3. A search for tigers is performed
4. A search for lions is performed
   • Because the data is invalid, isFetching will be true
   • To prevent showing the user invalid data, a spinner is shown when isFetching = true.

With my current flow, using placeholder data would work during the first search for lions, but not the second, because placeholderData only exists when the query doesn't have data. I think if I removed invalid queries every time a search was performed, I wouldn't need to show a spinner when isFetching = true. That would allow me to use placeholderData to show loading text. Thank you for suggesting placeholderData.

[ryanmk54]

After looking at things a little closer, I realized placeholderData won't work for this use case. Here are some observations I made based on the following codesandbox: https://codesandbox.io/s/new-worker-uwlw7?file=/src/App.js

Before the data returns from the server:

• data = placeholderData
• status = success
• isPlaceholderData = true

I realized that I would need to check for isPlaceholderData instead of status = 'idle' or status = 'loading'.

When an error occurs:

• data = undefined
• status = error
• isPlaceholderData = false

data is placeholderData while it is loading and undefined in the error state. If I store the query name in placeholderData, I won't have access to it in the error component.

[TkDodo]

this is the desired behavior of placeholderData. you can also use initialData, have a read on the differences here: https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query