How to cause Suspense to occur even when the cache is reacquired by updating it？ #3342

k4a-l · 2023-07-28T08:13:28Z

k4a-l
Jul 28, 2023

There is a Query that can retrieve the following data

{ count: number, __typename: "count" }

Then there is a mutation to update the cache, returning the same __typename as the Query above.

{ __typename: "count" }

What I want to do is to show a fallback due to Suspense, regardless of whether it is the first time retrieval or a reacquisition due to updating the cache.

However, Suspense only occurs on the first acquisition.
On refetch, no suspense occurs and the original data is still displayed, only the data is replaced when it is retrieved.

2023-07-28.17.10.03.mov

How to cause Suspense to occur even when the cache is reacquired by updating it？

Code

※ Query may be incorrect

Codesandbox that can reproduce this video

handler.ts (msw)

import { graphql } from "msw";

let count = 0;

export const handlers = [
  graphql.query("count", (req, res, ctx) => {
    return res(ctx.delay(500), ctx.data({ count, __typename: "count" }));
  }),
  graphql.mutation("updateCount", (req, res, ctx) => {
    count = req.variables.count;
    return res(ctx.delay(500), ctx.data({ __typename: "count" }));
  }),
];

App.tsx

import React, { Suspense, useState } from "react";
import { gql, useMutation, useQuery } from "urql";

// QUERY
const query = gql`
  query count {
    count
    __typename
  }
`;
const QueryComponent = () => {
  const [result] = useQuery({ query });
  const { data, error } = result;
  if (error) return <p>error... {error.message}</p>;
  return <div>{JSON.stringify(data)}</div>;
};

// MUTATION
const mutationQuery = gql`
  mutation updateCount($count: Int) {
    __typename
  }
`;
const MutationComponent = () => {
  const [count, setCount] = useState(0);
  const [, mutate] = useMutation(mutationQuery);

  return (
    // 3. Click mutate button to update cache and refetch
    <button
      onClick={() => {
        mutate({ count: count + 1 }).then(() => {
          setCount((prev) => prev + 1);
        });
      }}
    >
      mutate
    </button>
  );
};

// MAIN
export default function App() {
  const [load, setLoad] = useState(false);
  return (
    <>
      {load ? (
        <>
          {/* 2. The first fetch will be suspense. */}
          {/* 4. On refetch, no suspense occurs and the original data is still displayed, only the data is replaced when it is retrieved. */}
          <Suspense fallback={"Loading..."}>
            <QueryComponent />
          </Suspense>
          <MutationComponent />
        </>
      ) : (
        // 1. Click 'load' button for first fetch
        <button
          onClick={() => {
            setLoad(true);
          }}
        >
          load
        </button>
      )}
    </>
  );
}