Create exposed API for connection updates

docs/docs/use-mutation.md

@@ -8,6 +8,8 @@ sidebar_label: useMutation
 ### Params
 
 - `mutation`: your mutation document node
+- `config`:
+  - `connectionUpdates`: configuration to prepend/append/remove edges from connections on mutation
 
 ### Returns
 
@@ -74,3 +76,29 @@ const UserPage = ({ userId }: Props) => {
   );
 };
 ```
+
+## Handling connections
+
+```ts
+useMutation(BlockUser, {
+  connectionUpdates: [
+    ({ data, append }) =>
+      Option.fromNullable(data.blockUser).map(({ user }) =>
+        append(blockedUsers, [user]),
+      ),
+    ({ data, prepend }) =>
+      Option.fromNullable(data.blockUser).map(({ user }) =>
+        prepend(lastBlockedUsers, [user]),
+      ),
+  ],
+});
+
+useMutation(Unfriend, {
+  connectionUpdates: [
+    ({ variables, remove }) =>
+      Option.fromNullable(data.unfriend).map(() =>
+        remove(friends, [variables.id]),
+      ),
+  ],
+});
+```

src/client.ts

@@ -71,7 +71,50 @@ const defaultMakeRequest: MakeRequest = ({
     );
 };
 
-type RequestOptions = { optimize?: boolean };
+type ConnectionUpdate<Node> = [
+  Connection<Node>,
+  { prepend: Edge<Node>[] } | { append: Edge<Node>[] } | { remove: string[] },
+];
+
+const prepend = <A>(
+  connection: Connection<A>,
+  edges: Edge<A>[],
+): ConnectionUpdate<A> => {
+  return [connection, { prepend: edges }];
+};
+
+const append = <A>(
+  connection: Connection<A>,
+  edges: Edge<A>[],
+): ConnectionUpdate<A> => {
+  return [connection, { append: edges }];
+};
+
+const remove = <A>(
+  connection: Connection<A>,
+  ids: string[],
+): ConnectionUpdate<A> => {
+  return [connection, { remove: ids }];
+};
+
+export type GetConnectionUpdate<Data, Variables> = (config: {
+  data: Data;
+  variables: Variables;
+  prepend: <A>(
+    connection: Connection<A>,
+    edges: Edge<A>[],
+  ) => ConnectionUpdate<A>;
+  append: <A>(
+    connection: Connection<A>,
+    edges: Edge<A>[],
+  ) => ConnectionUpdate<A>;
+  remove: <A>(connection: Connection<A>, ids: string[]) => ConnectionUpdate<A>;
+}) => Option<ConnectionUpdate<unknown>>;
+
+type RequestOptions<Data, Variables> = {
+  optimize?: boolean;
+  connectionUpdates?: GetConnectionUpdate<Data, Variables>[] | undefined;
+};
 
 export class Client {
   url: string;
@@ -122,7 +165,10 @@ export class Client {
   request<Data, Variables>(
     document: TypedDocumentNode<Data, Variables>,
     variables: Variables,
-    { optimize = false }: RequestOptions = {},
+    {
+      optimize = false,
+      connectionUpdates,
+    }: RequestOptions<Data, Variables> = {},
   ): Future<Result<Data, ClientError>> {
     const transformedDocument = this.getTransformedDocument(document);
     const transformedDocumentsForRequest =
@@ -170,6 +216,17 @@ export class Client {
           variablesAsRecord,
         );
       })
+      .tapOk((data) => {
+        if (connectionUpdates !== undefined) {
+          connectionUpdates.forEach((getUpdate) => {
+            getUpdate({ data, variables, prepend, append, remove }).map(
+              ([connection, update]) => {
+                this.cache.updateConnection(connection, update);
+              },
+            );
+          });
+        }
+      })
       .tap((result) => {
         this.cache.setOperationInCache(
           transformedDocument,
@@ -205,29 +262,16 @@ export class Client {
   query<Data, Variables>(
     document: TypedDocumentNode<Data, Variables>,
     variables: Variables,
-    requestOptions?: RequestOptions,
+    requestOptions?: RequestOptions<Data, Variables>,
   ) {
     return this.request(document, variables, requestOptions);
   }
 
   commitMutation<Data, Variables>(
     document: TypedDocumentNode<Data, Variables>,
     variables: Variables,
-    requestOptions?: RequestOptions,
+    requestOptions?: RequestOptions<Data, Variables>,
   ) {
     return this.request(document, variables, requestOptions);
   }
-
-  updateConnection<A>(
-    connection: Connection<A>,
-    config:
-      | { prepend: Edge<A>[] }
-      | { append: Edge<A>[] }
-      | { remove: string[] },
-  ) {
-    this.cache.updateConnection(connection, config);
-    this.subscribers.forEach((func) => {
-      func();
-    });
-  }
 }

src/react/useMutation.ts

@@ -1,5 +1,6 @@
 import { AsyncData, Future, Result } from "@swan-io/boxed";
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useContext, useRef, useState } from "react";
+import { GetConnectionUpdate } from "../client";
 import { ClientError } from "../errors";
 import { TypedDocumentNode } from "../types";
 import { ClientContext } from "./ClientContext";
@@ -9,11 +10,19 @@ export type Mutation<Data, Variables> = readonly [
   AsyncData<Result<Data, ClientError>>,
 ];
 
+export type MutationConfig<Data, Variables> = {
+  connectionUpdates?: GetConnectionUpdate<Data, Variables>[] | undefined;
+};
+
 export const useMutation = <Data, Variables>(
   mutation: TypedDocumentNode<Data, Variables>,
+  config: MutationConfig<Data, Variables> = {},
 ): Mutation<Data, Variables> => {
   const client = useContext(ClientContext);
 
+  const connectionUpdatesRef = useRef(config?.connectionUpdates);
+  connectionUpdatesRef.current = config?.connectionUpdates;
+
   const [stableMutation] =
     useState<TypedDocumentNode<Data, Variables>>(mutation);
 
@@ -25,7 +34,9 @@ export const useMutation = <Data, Variables>(
     (variables: Variables) => {
       setData(AsyncData.Loading());
       return client
-        .commitMutation(stableMutation, variables)
+        .commitMutation(stableMutation, variables, {
+          connectionUpdates: connectionUpdatesRef.current,
+        })
         .tap((result) => setData(AsyncData.Done(result)));
     },
     [client, stableMutation],

src/types.ts

@@ -22,8 +22,8 @@ export interface TypedDocumentNode<
     DocumentTypeDecoration<TResult, TVariables> {}
 
 export type Edge<T> = {
-  __typename?: string;
-  cursor?: string | null;
+  __typename?: string | null | undefined;
+  cursor?: string | null | undefined;
   node?: T | null | undefined;
 };