Fix issue where data would disappear after refreshing the page (#1454)

Author: jerelmiller

.changeset/nine-walls-bathe.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Fix an issue where data would sometimes disappear a few seconds after refreshing the page with no way to recover the data afterward.

src/application/App.tsx

@@ -36,7 +36,7 @@ import { isSnapshotRelease, parseSnapshotRelease } from "./utilities/github";
 import { Select } from "./components/Select";
 import { Divider } from "./components/Divider";
 import { useActorEvent } from "./hooks/useActorEvent";
-import { addClient, removeClient } from ".";
+import { removeClient } from ".";
 
 const APP_QUERY: TypedDocumentNode<AppQuery, AppQueryVariables> = gql`
   query AppQuery {
@@ -74,22 +74,28 @@ export const App = () => {
     devtoolsMachine.provide({
       actions: {
         resetStore: () => {
-          apolloClient.resetStore().catch(() => {});
+          apolloClient.clearStore().catch(() => {});
         },
       },
     })
   );
-  const { data, client: apolloClient } = useQuery(APP_QUERY, {
-    errorPolicy: "all",
-  });
+  const {
+    data,
+    client: apolloClient,
+    refetch,
+  } = useQuery(APP_QUERY, { errorPolicy: "all" });
 
   useActorEvent("connectToDevtools", () => {
     send({ type: "connect" });
   });
 
-  useActorEvent("registerClient", (message) => {
+  useActorEvent("registerClient", () => {
     send({ type: "connect" });
-    addClient(message.payload);
+    // Unfortunately after we clear the store above, the query ends up "stuck"
+    // holding onto the old list of clients even if we manually write a cache
+    // update to properly resolve the list. Instead we refetch the list again to
+    // force the query to reload to ensure its in sync with the latest values.
+    refetch();
   });
 
   useActorEvent("clientTerminated", (message) => {

src/application/index.tsx

@@ -1,12 +1,7 @@
 import { useEffect } from "react";
 import { createRoot } from "react-dom/client";
-import type { Reference, TypedDocumentNode } from "@apollo/client";
-import {
-  ApolloClient,
-  ApolloProvider,
-  InMemoryCache,
-  gql,
-} from "@apollo/client";
+import type { Reference } from "@apollo/client";
+import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import { SchemaLink } from "@apollo/client/link/schema";
 
 import { colorTheme, listenForThemeChange } from "./theme";
@@ -16,8 +11,6 @@ import * as Tooltip from "@radix-ui/react-tooltip";
 
 import { getRpcClient } from "../extension/devtools/panelRpcClient";
 import { createSchemaWithRpcClient } from "./schema";
-import type { ApolloClientInfo } from "../types";
-import type { ClientFields } from "./types/gql";
 
 const rpcClient = getRpcClient();
 const schema = createSchemaWithRpcClient(rpcClient);
@@ -51,9 +44,11 @@ const cache = new InMemoryCache({
       },
     },
     ClientQueries: {
+      keyFields: false,
       merge: true,
     },
     ClientMutations: {
+      keyFields: false,
       merge: true,
     },
     SerializedApolloError: {
@@ -67,49 +62,6 @@ const cache = new InMemoryCache({
 
 export const client = new ApolloClient({ cache, link });
 
-export const addClient = (clientData: ApolloClientInfo) => {
-  client.cache.modify({
-    id: "ROOT_QUERY",
-    fields: {
-      clients: (clients) => {
-        const ref = client.writeFragment({
-          fragment: gql`
-            fragment ClientFields on Client {
-              id
-              version
-              queries {
-                total
-              }
-              mutations {
-                total
-              }
-            }
-          ` as TypedDocumentNode<ClientFields>,
-          id: client.cache.identify({
-            __typename: "Client",
-            id: clientData.id,
-          }),
-          data: {
-            __typename: "Client",
-            id: clientData.id,
-            version: clientData.version,
-            queries: {
-              __typename: "ClientQueries",
-              total: clientData.queryCount,
-            },
-            mutations: {
-              __typename: "ClientMutations",
-              total: clientData.mutationCount,
-            },
-          },
-        });
-
-        return ref ? [...clients, ref] : clients;
-      },
-    },
-  });
-};
-
 export const removeClient = (clientId: string) => {
   client.cache.modify({
     id: "ROOT_QUERY",

src/application/types/gql.ts

@@ -280,11 +280,3 @@ export type SerializedErrorAlertDisclosureItem_error = {
   name: string;
   stack: string | null;
 };
-
-export type ClientFields = {
-  __typename: "Client";
-  id: string;
-  version: string;
-  queries: { __typename: "ClientQueries"; total: number };
-  mutations: { __typename: "ClientMutations"; total: number };
-};