Emitir

O problema parece ser que o onClickmanipulador Appestá fazendo duas coisas:

1. Chamadas client.resetStore();quando boolé verdade
2. Enfileira uma boolatualização de estado para alternar o valor para falso

O que suspeito que esteja acontecendo é que o cliente de consulta é redefinido imediatamente e a atualização de estado do React é apenas enfileirada e processada algum tempo depois pelo React. Enquanto o cliente de consulta é redefinido e Testainda está montado, outra solicitação de consulta é disparada pouco antes do React processar a atualização de estado enfileirada e acionar uma Appnova renderização do componente, que resultará na Testdesmontagem.

Sugestões de soluções

• Atrase a client.restorechamada por um pequeno atraso para que ela seja efetuada após a boolatualização de estado ter a chance de ser processada e a Appárvore de componentes renderizada novamente.

  export default function App() {
    const [bool, setBool] = useState(false);
    const client = useApolloClient();
  
    return (
      <main>
        <button
          onClick={() => {
            setBool((bool) => {
              return !bool;
            });
            setTimeout(() => {
              if (bool) {
                client.resetStore();
              }
            }, 100); // * Note
          }}
        >
          Click me
        </button>
        {bool && <Test bool={bool} />}
      </main>
    );
  }
  

  _{^* Observação: Isso parece funcionar com um atraso de apenas 4 a 5 ms, mas usei um valor maior por precaução. Você pode ajustar isso para atender melhor às suas necessidades.}

• Use AbortControllere cancele quaisquer solicitações em andamento quando Testo componente for desmontado.

  export const Test = ({ bool }) => {
    const abortController = useRef(new AbortController());
  
    const { data, loading, error } = useQuery(testQuery, {
      skip: !bool,
      variables: { holy: "shit" },
      context: {
        fetchOptions: {
          signal: abortController.current.signal,
        }
      },
    });
  
    useEffect(() => {
      return () => {
        abortController.current.abort("Component unmounted");
      }
    }, []);
  
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
    return (
      <div>
        {data.countries.map((country) => (
          <div key={country.name}>{country.name}</div>
        ))}
      </div>
    );
  };
  

Acho que o que está acontecendo é que, quando boolse torna falso, o componente Test é desmontado instantaneamente e o hook useQuery não consegue registrar que a consulta deve ser ignorada. Portanto, para o useQueryhook, o valor passado para skip ainda é falso. Agora, como o Apollo busca novamente todas as consultas ativas após chamar resetStore()essa consulta, ela também está sendo buscada novamente.

A documentação do ApolloGraphQL afirma que

É importante lembrar que resetStore() buscará novamente todas as consultas ativas. Isso significa que quaisquer componentes que possam estar montados executarão suas consultas novamente usando sua interface de rede. Se você não quiser executar nenhuma consulta novamente, certifique-se de parar de monitorar as consultas ativas.

Então, tecnicamente, a consulta não deveria ser chamada, já que o componente não está montado, então pode ser um bug.

Corrigi o problema não renderizando condicionalmente o componente inteiro, mas apenas a interface do usuário (UI) do componente, e deixando a consulta ser ignorada quando bool for falso.

Aplicativo.jsx:

import { useEffect, useState } from "react";
import "./App.css";
import { Test } from "../test";
import { useApolloClient } from "@apollo/client";

export default function App() {
  const [bool, setBool] = useState(false);
  const client = useApolloClient();
  return (
    <main>
      <button
        onClick={() => {
          setBool((bool) => {
            client.resetStore()
            return !bool;
          });
        }}
      >
        Click me
      </button>
      <Test bool={bool} />
    </main>
  );
}

teste.jsx:

import { gql, useQuery } from "@apollo/client";

const testQuery = gql`
  query {
    countries {
      name
    }
  }
`;
export const Test = ({ bool }) => {
  const { data, loading, error } = useQuery(testQuery, {
    skip: !bool,
    variables: { holy: "shit" },
  });
  if(!bool){
    return null
  }
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  return (
    <div>
      {data.countries.map((country) => (
        <div key={country.name}>{country.name}</div>
      ))}
    </div>
  );
};