feat(devtools): history representation (#610)

* history in devtools

* ignore build artefacts

* cleanup

* Change files

* fix lint

* add test

* remove history from benchmark

Author: pavelglac

change/@graphitation-apollo-forest-run-008e8ecd-ce3c-4505-878d-dbe4c853a644.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add exports and fix missing fields array to not contain empty entries.",
+  "packageName": "@graphitation/apollo-forest-run",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@graphitation-rempl-apollo-devtools-19087441-4bef-41b5-ba24-a02f4eb2076d.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "History for operations. Dependency on ForestRun",
+  "packageName": "@graphitation/rempl-apollo-devtools",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

examples/apollo-devtools-playground/.gitignore

@@ -2,3 +2,4 @@ node_modules
 build
 apollo-devtools.js
 apollo-devtools.js.map
+public/apollo-devtools-*

examples/apollo-devtools-playground/public/apollo-devtools-publisher.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { ApolloProvider } from "@apollo/client";
 import { buildClient } from "data/data-builder";
 import ChatContainer from "./chat/chat-container";
+import { OptimisticUpdateDemo } from "./optimistic-update-demo";
 import { FluentProvider, teamsLightTheme } from "@fluentui/react-components";
 
 const client = buildClient();
@@ -20,6 +21,7 @@ const App = () => {
   return (
     <FluentProvider theme={teamsLightTheme}>
       <ApolloProvider client={client}>
+        <OptimisticUpdateDemo />
         <ChatContainer />
       </ApolloProvider>
     </FluentProvider>

examples/apollo-devtools-playground/public/apollo-devtools-subscriber.js

@@ -1,22 +1,34 @@
 import * as React from "react";
-import { useQuery, gql, useMutation } from "@apollo/client";
+import { useQuery, gql, useMutation, useApolloClient } from "@apollo/client";
 import { ChatRenderer } from "./chat-renderer";
 
 const CHAT = gql`
-  query Chat {
+  query Chat($history: Int) @cache(history: $history) {
     chat {
       messages {
+        text
+        id
+      }
+    }
+  }
+`;
+
+const CHAT_MANUAL = gql`
+  query ChatManul {
+    chat {
+      messages {
+        text
         id
       }
     }
   }
 `;
 
 const ADD_MESSAGES = gql`
-  mutation addMessage($message: String!) {
-    addMessage(message: $message) {
+  mutation addMessage($text: String!) {
+    addMessage(text: $text) {
       id
-      message
+      text
     }
   }
 `;
@@ -27,15 +39,25 @@ const REMOVE_MESSAGE = gql`
   }
 `;
 
+const SHUFFLE_MESSAGES = gql`
+  mutation shuffleMessages {
+    shuffleMessages
+  }
+`;
+
 const ChatContainer = () => {
-  const { data, refetch } = useQuery(CHAT);
+  const client = useApolloClient();
+  const { data, refetch, ...rest } = useQuery(CHAT, {
+    variables: { history: 15 },
+  });
   const [addMessage] = useMutation(ADD_MESSAGES);
   const [removeMessage] = useMutation(REMOVE_MESSAGE);
+  const [shuffleMessages] = useMutation(SHUFFLE_MESSAGES);
 
   const addMessageFunction = React.useCallback(
-    async (message: string) => {
+    async (text: string) => {
       await addMessage({
-        variables: { message },
+        variables: { text },
       });
       refetch();
     },
@@ -52,12 +74,47 @@ const ChatContainer = () => {
     [removeMessage, refetch],
   );
 
+  const shuffleMessagesFunction = React.useCallback(async () => {
+    await shuffleMessages();
+    refetch();
+  }, [shuffleMessages, refetch]);
+
+  // Manual cache write that only writes id (missing `text` field).
+  // This will cause reads of CHAT to report a missing `text` field for the newly written items.
+  const addIdOnlyMessageFunction = React.useCallback(() => {
+    const id = String(Date.now());
+    const existing = data?.chat?.messages ?? [];
+    const newMsg = {
+      id,
+      __typename: "Message",
+      // intentionally omit `text` to demonstrate a missing field when reading
+    } as any;
+
+    client.writeQuery({
+      query: CHAT_MANUAL,
+      data: {
+        chat: {
+          __typename: "Chat",
+          messages: [...existing, newMsg],
+        },
+      },
+    });
+  }, [client, data]);
+
   return (
     <div>
+      <button onClick={addIdOnlyMessageFunction}>
+        Add Message with missing text field
+      </button>
       <ChatRenderer
-        ids={data?.chat?.messages?.map(({ id }: { id: string }) => id) || []}
+        ids={
+          data?.chat?.messages?.map(
+            (message: { id: string } | null) => message?.id,
+          ) || []
+        }
         removeMessage={removeMessageFunction}
         addMessage={addMessageFunction}
+        shuffleMessages={shuffleMessagesFunction}
       />
     </div>
   );

examples/apollo-devtools-playground/src/components/app.tsx

@@ -7,12 +7,14 @@ interface IChatRenderer {
   ids: string[];
   removeMessage: (id: string) => void;
   addMessage: (message: string) => void;
+  shuffleMessages: () => void;
 }
 
 export const ChatRenderer = ({
   ids,
   removeMessage,
   addMessage,
+  shuffleMessages,
 }: IChatRenderer) => {
   const [messageText, setMessageText] = React.useState("");
   const styles = useChatRendererStyles();
@@ -32,6 +34,7 @@ export const ChatRenderer = ({
           }}
         />
         <Button onClick={() => addMessage(messageText)}>Add Message</Button>
+        <Button onClick={() => shuffleMessages()}>Shuffle Messages</Button>
       </div>
       <Messages ids={ids} removeMessage={removeMessage} />
     </>

examples/apollo-devtools-playground/src/components/chat/chat-container.tsx

@@ -6,16 +6,16 @@ const MESSAGE = gql`
   query message($id: ID) {
     message(id: $id) {
       id
-      message
+      text
     }
   }
 `;
 
 const UPDATE_MESSAGE = gql`
-  mutation updateMessage($id: ID!, $message: String!) {
-    updateMessage(id: $id, message: $message) {
+  mutation updateMessage($id: ID!, $text: String!) {
+    updateMessage(id: $id, text: $text) {
       id
-      message
+      text
     }
   }
 `;
@@ -30,7 +30,7 @@ export default ({ id }: MessageProps) => {
   const [isEditing, setIsEditing] = React.useState(false);
   const [editValue, setEditValue] = React.useState("");
 
-  const messageText = data?.message?.message || "";
+  const messageText = data?.message?.text || "";
 
   React.useEffect(() => {
     setEditValue(messageText);
@@ -41,7 +41,7 @@ export default ({ id }: MessageProps) => {
   };
 
   const handleSave = () => {
-    updateMessage({ variables: { id, message: editValue } });
+    updateMessage({ variables: { id, text: editValue } });
     setIsEditing(false);
   };