Unwrapping a query when invalidated returns stale data

[josephhailu]

When a tagged query is invalidated and I unwrap the result, the data is stale.

Expected:
The lazyQuery states:

@remarks — If you need to access the error or success payload immediately after a lazy query, you can chain .unwrap().

@example

// codeblock-meta title="Using .unwrap with async await"
try {
  const payload = await getUserById(1).unwrap();
  console.log('fulfilled', payload)
} catch (error) {
  console.error('rejected', error);
}

Actual: The result is not available immediately

Steps to reproduce:
https://codesandbox.io/p/sandbox/rtk-query-forked-pgs433

Click 'Load Posts'
Click 'Delete Post'
The list synced by useEffect will be up to date.
The list set by unwrapping will be out of date.

import React from "react";
import { Spinner } from "../../components/Spinner";
import { Wrapper } from "../../components/Wrapper";
import { useLazyGetPostsQuery, useDeletePostMutation } from "../api/apiSlice";

export const PostExcerpt = ({ post, handleLoad }) => {
  const [deleteTrigger, { isLoading }] = useDeletePostMutation();

  return (
    <article className="post-excerpt" key={post.id}>
      <div style={{ display: "flex", flexDirection: "column", gap: "15px" }}>
        <h3>{post.title}</h3>

        <button
          style={{ maxWidth: "155px" }}
          onClick={async () => {
            try {
              await deleteTrigger({ id: post.id });
              handleLoad && (await handleLoad());
            } catch (error) {
              console.error({ error });
            }
          }}
          className="button muted-button"
          disabled={isLoading}
        >
          {isLoading ? "Deleting Post..." : "Delete Post"}
        </button>
      </div>
    </article>
  );
};

export const LazyPostsUnwrapUseEffect = () => {
  const [getPostsTrigger, { isFetching, isSuccess, isError, error, data }] =
    useLazyGetPostsQuery();

  const [postData, setPostData] = React.useState([]);
  const [buggyPostData, setBuggyPostData] = React.useState([]);

  React.useEffect(() => {
    setPostData(data); // adding client side state here will be ok
  }, [data]);

  const handleLoad = async () => {
    try {
      const res = await getPostsTrigger().unwrap();
      console.log({ res });

      setBuggyPostData(res); // adding client side state here will cause stale data
    } catch (error) {
      console.error(error);
    }
  };

  let content;

  if (isFetching) {
    content = <Spinner text="Loading..." />;
  } else if (isSuccess) {
    content = (
      <Wrapper>
        <div className="wrapper">
          <p>Useffect data:</p>
          {postData?.map((post) => (
            <PostExcerpt key={post.id} post={post} />
          ))}
        </div>
        <div className="wrapper">
          <p>Unwrap + setState data:</p>
          {buggyPostData.map((post) => (
            <PostExcerpt key={post.id} post={post} handleLoad={handleLoad} /> // even passing the trigger to manually refetch does not update the data
          ))}
        </div>
      </Wrapper>
    );
  } else if (isError) {
    content = <div>{error}</div>;
  }

  return (
    <section className="posts-list">
      <h2>Lazy Query: unwrapping + setState vs useEffect:</h2>
      <p>
        Click load posts, delete a post, and verify the unwrap list is stale
      </p>
      <button onClick={handleLoad}>Load Posts</button>
      <br />
      {content}
    </section>
  );
};

[phryneas]

That looks correct to me:

Whenever you trigger handleLoad, it loads the data from the server and then returns it. But nothing kicks of your handleLoad after your mutation, so that would never happen. So it looks stale, but for the sole reason that you never asked for newer data.

Yes, you have logic in there to do so, but that seems broken somewhere, inside of your delete trigger callback, handleLoad seems to be undefined, so you never call it.

Generally, you should leave it up to RTKQ to hold your data and you should probably avoid copying it into local state, though, for the reasons you see here: it's easy to get syncing wrong.

[josephhailu]

Thanks for looking into this

So it looks stale, but for the sole reason that you never asked for newer data. Yes, you have logic in there to do so, but that seems broken somewhere, inside of your delete trigger callback, handleLoad seems to be undefined, so you never call it.

My reproduction is not too clear but the second list does define handleLoad which is being called when deleting an item in the 2nd list.

<PostExcerpt key={post.id} post={post} handleLoad={handleLoad} /> // even passing the trigger to manually refetch does not update the data

When deleting from the 2nd list, assuming handleLoad is defined, is your expectation that;

• calling the delete trigger
• re-calling the load trigger
• unwrapping the load

should return the latest data?
If you expect to get the latest data, this does not happen unless I remove tags from the getPosts endpoint

[phryneas]

Hmm, indeed, I only clicked into the left list, not the right list 😓

Digging a bit...

[phryneas]

Okay, found the bug:

refetchQuery

redux-toolkit/packages/toolkit/src/query/core/buildMiddleware/index.ts

Lines 144 to 162 in d9a9106

	function refetchQuery(
	querySubState: Exclude<
	QuerySubState<any>,
	{ status: QueryStatus.uninitialized }
	>,
	queryCacheKey: string,
	override: Partial<QueryThunkArg> = {},
	) {
	return queryThunk({
	type: 'query',
	endpointName: querySubState.endpointName,
	originalArgs: querySubState.originalArgs,
	subscribe: false,
	forceRefetch: true,
	queryCacheKey: queryCacheKey as any,
	...override,
	})
	}
	}

does not populate runningQueries

redux-toolkit/packages/toolkit/src/query/core/buildInitiate.ts

Lines 202 to 205 in d9a9106

	const runningQueries: Map<
	Dispatch,
	Record<string, QueryActionCreatorResult<any> | undefined>
	> = new Map()

This is tricky :/

[phryneas]

There should be a PR build in #4651 in a moment - could you please try that one out and see if it fixes your problem?