The return variable promise from useQuery is returning outdated values after being called again.

[Joao1V]

I'm fetching details of a specific product and then editing that data.

The first time I call this variable, when nothing is stored in the cache yet, the promise remains pending until the data is returned, which works perfectly:

const data = await promise

However, on the second call, after the product data has been updated, the promise returns the previously cached value instead of the updated data.

What I expected was for the returned data to always be up to date. In the example I saw, the promise was used inside React.use(), but in my case, I’m simply calling await promise when the component loads. Since a new request is made, I expected to receive the latest data.

I need to handle the data asynchronously within my component, which prevents me from using hooks like isFetching, isLoading, and data. Given this scenario, would this be a misuse of the API or an actual bug?

[TkDodo]

You can't call await promise in a react component 🤨

[Joao1V]

Maybe I’m misunderstanding how to use promise, and I apologize for that.

The scenario where I’m trying to use promise is with the defaultValue prop of react-hook-form to set the initial values of the fields.

Here’s an example of how I’m running the code. It’s called inside a modal that unmounts when closed. When reopening the modal, a new fetch request is made to the API to get the updated data. However, since there’s already a cached value, the promise returns outdated data.

I’m trying to understand how promise works and what mistakes I might be making.

[TkDodo]

promise is an experimental feature intended for usage with use.

For react hook form, you want the reactive values api here: https://react-hook-form.com/docs/useform#values

[TkDodo]

However, on the second call, after the product data has been updated, the promise returns the previously cached value instead of the updated data.

I don’t know what “the second call is”. Is it a refetch? Is it a query key change? something else? If it’s about defaultValues, how can there be a second call given that defaultValues is only evaluated once?

screenshots aren’t helping as they aren’t showing the whole picture. Please provide a minimal, runnable reproduction of your problem with stackblitz or codesandbox.

[rlancer]

Getting the same issue, my use case is with AG Grid, where I invalidate the query and then the promise is called again but returns stale data

cellEditorParams: {
        values: async () => {
          const vals = await themesQuery.promise;
          console.log("Fetching themes", vals); // this always returns the values from the first resolve, even if the query is invalidated 
          return [
            ...vals,
          ];
        },
      

[rlancer]

In further testing, I think the issue might be using it outside of React

[TkDodo]

promise is an experimental feature intended for usage with use.

you likely want await queryClient.fetchQuery