useSuspenseQuery first refetchQueries doesn't trigger

[tombryden]

Hello,

I have noticed that useSuspenseQuery is not refetching on the first call after a mutation calls it in refetchQueries.

Here is a gif of what occurs with added delay from the api

When changing to useQuery, all works as expected.

Page

import AddTodo from "@/components/add-todo";
import TodoList from "@/components/todo-list";
import { Box, Typography } from "@mui/material";

export default function Home() {
  return (
    <Box
      component="main"
      display="flex"
      flexDirection="column"
      alignItems="center"
    >
      <Typography variant="h2" component="h1" mb={2}>
        My Todo List
      </Typography>

      <AddTodo />

      <TodoList />
    </Box>
  );
}

TodoList

"use client";

import { graphql } from "@/gql";
import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";
import Todo from "./todo";

const GET_ALL_TODOS_QUERY = graphql(`
  query getAllTodos {
    todos {
      id
      text
      done
    }
  }
`);

export default function TodoList() {
  const { data } = useSuspenseQuery(GET_ALL_TODOS_QUERY, {
    context: { fetchOptions: { cache: "no-cache" } },
  });

  return data.todos.map((todo) => <Todo key={todo.id} todoId={todo.id} />);
}

AddTodo

"use client";

import { graphql } from "@/gql";
import { useMutation } from "@apollo/client";
import { LoadingButton } from "@mui/lab";
import { Box, TextField } from "@mui/material";
import { useState } from "react";
import { GetAllTodosDocument } from "@/gql/graphql";

const ADD_NEW_TODO_MUTATION = graphql(`
  mutation addNewTodo($text: String!, $done: Boolean!) {
    saveTodo(todo: { text: $text, done: $done }) {
      id
      text
      done
    }
  }
`);

export default function AddTodo() {
  const [text, setText] = useState("");

  const [addTodo, { loading }] = useMutation(ADD_NEW_TODO_MUTATION, {
    refetchQueries: [{ query: GetAllTodosDocument }],
    awaitRefetchQueries: true,
  });

  return (
    <Box display="flex" gap={1}>
      <TextField
        label="Todo"
        value={text}
        onChange={(e) => setText(e.target.value)}
        sx={{ width: "500px" }}
      />

      <LoadingButton
        onClick={() =>
          addTodo({
            variables: { text, done: false },
          })
        }
        loading={loading}
      >
        Add
      </LoadingButton>
    </Box>
  );
}

Thanks

[phryneas]

Thanks for the report!

Can you please check if this also occurs with the useSuspenseQuery from @apollo/client, so that we can pinpoint which of the two libraries we have to debug here? :)

[tombryden]

I just retested using a toggle show button to avoid hydration issues with useSuspenseQuery from @apollo/client.

Refetchqueries works as expected in this case.

[tombryden]

Arrr, I just retested the same scenario (toggle button) using the import from @apollo/experimental-nextjs-app-support/ssr and this refetches the first time successfully.

It looks like the issue only occurs when loading via SSR.

[phryneas]

You are on 0.4.2? We had a bug that didn't "finish" simulated network requests in older versions that might surface like this.

[tombryden]

Yes, I am on 0.4.2.

[phryneas]

I'll try to look into that next week. If you could provide me with a minimal reproduction, I would be very grateful!

[tombryden]

Thanks! Here you go: https://github.com/tombryden/experimental-apollo-suspense-bug

Sandbox: https://codesandbox.io/p/github/tombryden/experimental-apollo-suspense-bug/

How To Use

npm run dev

Click mutate button

Observe

1. The first time you click the 'Mutate' button no refetch query occurs to get all posts
2. The second time you click the 'Mutate' button the refetch query runs

[phryneas]

Could you please verify if this build from #96 solves your problem?

npm i @apollo/[email protected]

[phryneas]

This should be fixed with https://github.com/apollographql/apollo-client-nextjs/releases/tag/v.0.4.3

[tombryden]

Apologies for the delay! Can confirm this is now working as expected. Many thanks.