update projects list when we create a new project

Author: saihaj

management-api/schema.graphql

@@ -34,6 +34,7 @@ type CreateProjectPayload {
   The created project
   """
   project: Project!
+  projectEdge: QueryProjectsConnectionEdge!
 }
 
 """

management-api/src/index.ts

@@ -23,6 +23,7 @@ const yoga = createYoga<Env>({
     const jwt = authorization.split(" ")[1];
 
     let authUserId: string | null = null;
+
     if (jwt) {
       const { payload } = await jwtVerify(
         jwt, // The raw Bearer Token extracted from the request header

management-api/src/schema/project.ts

@@ -4,6 +4,13 @@ import { v4 as uuidv4 } from "uuid";
 import { ProjectConfigurationSchema, SUPPORTED_CHAINS } from "utils";
 import { and, asc, eq, gt, or, sql } from "drizzle-orm";
 import { decodeGlobalID } from "@pothos/plugin-relay";
+import {
+  InputShapeFromFields,
+  InputFieldMap,
+  MaybePromise,
+} from "@pothos/core";
+import { Context } from "context";
+import { GraphQLResolveInfo } from "graphql";
 
 const Chain = builder.enumType("Chain", {
   values: SUPPORTED_CHAINS,
@@ -129,13 +136,29 @@ builder.node(Project, {
       .where(sql`${project.id} IN (${ids})`),
 });
 
-builder.queryField("projects", (t) => {
-  return t.connection({
+const ProjectsEdge = builder.edgeObject({
+  name: "QueryProjectsConnectionEdge",
+  type: Project,
+});
+
+const ProjectsConnection = builder.connectionObject(
+  {
+    name: "QueryProjectsConnection",
     type: Project,
+  },
+  ProjectsEdge,
+);
+
+builder.queryField("projects", (t) => {
+  return t.field({
+    type: ProjectsConnection,
     description: "List of projects",
     authScopes: {
       isAuthenticated: true,
     },
+    args: {
+      ...t.arg.connectionArgs(),
+    },
     resolve: async (_parent, { first, after }, { db }) => {
       const limit = first ?? 10;
 
@@ -338,6 +361,15 @@ builder.relayMutationField(
         description: "The created project",
         resolve: (res) => res,
       }),
+      projectEdge: t.field({
+        type: ProjectsEdge,
+        resolve: (res) => {
+          return {
+            cursor: `${res.createdAt}__${res.id}`,
+            node: res,
+          };
+        },
+      }),
     }),
   },
 );

web/src/components/create/__generated__/createProjectMutation.graphql.ts

@@ -27,7 +27,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../ui/dialog";
-import { graphql, useMutation } from "react-relay";
+import { ConnectionHandler, graphql, useMutation } from "react-relay";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { createProjectMutation } from "./__generated__/createProjectMutation.graphql";
@@ -75,6 +75,12 @@ export function CreateProject() {
   const [commit, isInFlight] = useMutation<createProjectMutation>(graphql`
     mutation createProjectMutation($input: CreateProjectInput!) {
       createProject(input: $input) {
+        projectEdge {
+          node {
+            id
+            ...projects_ProjectCard
+          }
+        }
         project {
           id
         }
@@ -105,6 +111,21 @@ export function CreateProject() {
         // TODO: handle errors
         console.log("error", error);
       },
+      updater(store) {
+        const root = store.getRoot();
+
+        const payload = store.getRootField("createProject");
+        const serverEdge = payload?.getLinkedRecord("projectEdge");
+        if (!serverEdge) return;
+
+        const connection = ConnectionHandler.getConnection(
+          root,
+          "ProjectsGrid_projects",
+        );
+        if (!connection) return;
+
+        ConnectionHandler.insertEdgeAfter(connection, serverEdge);
+      },
       onCompleted() {
         setIsOpened(false);
         form.reset();