feat(c-event-mutation): add eventCreateMutation

src/components/event/Root.tsx → src/components/Root.tsx

@@ -9,7 +9,10 @@ import Box from "@mui/material/Box";
 
 import { Outlet } from "react-router-dom";
 
+import EventCreateDialog from "./event/eventCreate/EventCreateDialog";
+
 const Root = () => {
+
   return (
     <>
       <Box sx={{ flexGrow: 1 }}>
@@ -19,9 +22,7 @@ const Root = () => {
             <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
               GraphQL Relay Web
             </Typography>
-            <Button color="inherit" variant="outlined">
-              New Event
-            </Button>
+            <EventCreateDialog />
           </Toolbar>
         </AppBar>
         <Box

src/components/event/eventCreate/mutations/EventCreateMutation.tsx

@@ -0,0 +1,32 @@
+import { graphql } from "react-relay";
+import { ROOT_ID, SelectorStoreUpdater } from "relay-runtime";
+
+import { connectionUpdater } from "../../../../relay";
+
+export const EventCreate = graphql`
+  mutation EventCreateMutation($input: EventCreateInput!) {
+    EventCreate(input: $input) {
+      event {
+        id
+        name
+        start
+        end
+        allDay
+      }
+      error
+      success
+    }
+  }
+`;
+
+export const updater: SelectorStoreUpdater = (store) => {
+  const newEdge = store.getRootField("EventCreate").getLinkedRecord("event");
+
+  connectionUpdater({
+    store,
+    parentId: ROOT_ID,
+    //connectionName: 'Feed_posts',
+    edge: newEdge,
+    before: true,
+  });
+};

src/relay/index.tsx

@@ -1 +1,2 @@
 export { default as Environment } from './RelayEnvironment';
+export { connectionUpdater, connectionDeleteEdgeUpdater } from './mutationUtils';

src/relay/mutationUtils.tsx

@@ -0,0 +1,73 @@
+import { ConnectionHandler, RecordProxy, RecordSourceProxy } from 'relay-runtime';
+
+type ConnectionUpdater = {
+  store: RecordSourceProxy;
+  parentId: string;
+  connectionName: string;
+  edge: RecordProxy;
+  before?: boolean;
+};
+
+export function connectionUpdater({ store, parentId, connectionName, edge, before = false }: ConnectionUpdater) {
+  if (edge) {
+    if (!parentId) {
+      // eslint-disable-next-line
+      console.log('maybe you forgot to pass a parentId: ');
+      return;
+    }
+
+    const parentProxy = store.get(parentId);
+
+    if (!parentProxy) {
+      // eslint-disable-next-line
+      console.log(`Parent proxy not found for "${parentId}"`);
+      return;
+    }
+
+    const conn = ConnectionHandler.getConnection(parentProxy, connectionName);
+    if (!conn) {
+      // eslint-disable-next-line
+      console.log('maybe this connection is not in relay store: ', connectionName);
+      return;
+    }
+
+    if (before) {
+      ConnectionHandler.insertEdgeBefore(conn, edge);
+    } else {
+      ConnectionHandler.insertEdgeAfter(conn, edge);
+    }
+  }
+}
+
+type ConnectionDeleteEdgeUpdaterOptions = {
+  parentId: string;
+  connectionName: string;
+  nodeId: string;
+  store: RecordSourceProxy;
+  filters?: object;
+};
+
+export function connectionDeleteEdgeUpdater({
+  parentId,
+  connectionName,
+  nodeId,
+  store,
+}: ConnectionDeleteEdgeUpdaterOptions) {
+  const parentProxy = store.get(parentId);
+
+  if (!parentProxy) {
+    // eslint-disable-next-line
+    console.log(`Parent proxy not found for "${parentId}"`);
+    return;
+  }
+
+  const conn = ConnectionHandler.getConnection(parentProxy, connectionName);
+
+  if (!conn) {
+    // eslint-disable-next-line
+    console.warn(`Connection ${connectionName} not found on ${parentId}`);
+    return;
+  }
+
+  ConnectionHandler.deleteNode(conn, nodeId);
+}

src/routes.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter, Route, Routes as Router } from 'react-router-dom';
 
 import EventHome from './components/event/EventHome';
 
-import Root from './components/event/Root';
+import Root from './components/Root';
 
 function Routes() {
   return (