1generator client {
2  provider = "prisma-client-js"
3  output   = "./generated/client"
4}
5
6datasource db {
7  provider = "postgresql"
8  url      = env("DATABASE_URL")
9}
10
11// Pothos generator to create types from Prisma models
12generator pothos {
13  provider = "prisma-pothos-types"
14}
15
16model User {
17  id            String    @id
18  name          String
19  email         String    @unique
20  emailVerified Boolean
21  image         String?
22  createdAt     DateTime  @default(now()) // Corrected: Added default
23  updatedAt     DateTime  @updatedAt
24  sessions      Session[]
25  accounts      Account[]
26
27  // Social aspects
28  posts         Post[]
29  likes         Like[]
30  comments      Comment[]
31  // Follow relationships
32  followers     Follow[]  @relation("following")
33  following     Follow[]  @relation("follower")
34  role          String?
35  banned        Boolean?
36  banReason     String?
37  banExpires    DateTime?
38
39  apikeys       Apikey[]
40
41  @@map("user")
42}
43
44model Post {
45  id        String   @id @default(ulid())
46  createdAt DateTime @default(now())
47  updatedAt DateTime @updatedAt
48  content   String
49  imageUrl  String?
50  // Relations
51  author    User     @relation(fields: [authorId], references: [id], onDelete: Cascade)
52  authorId  String
53  likes     Like[]
54  comments  Comment[]
55}
56
57model Like {
58  id        String   @id @default(ulid())
59  createdAt DateTime @default(now())
60  updatedAt DateTime @updatedAt
61  // Relations
62  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
63  userId    String
64  post      Post     @relation(fields: [postId], references: [id], onDelete: Cascade)
65  postId    String
66
67  // Ensure a user can only like a post once
68  @@unique([userId, postId])
69}

1// Define the generic types for the Pothos builder, including Prisma types and Context
2export type PothosBuilderGenericType = { // Corrected Typo: PothosBuilderGenericTYpe -> PothosBuilderGenericType
3  PrismaTypes: PrismaTypes;
4  Context: {
5    currentUser?: Pick<User, "id" | "email" | "name">; // Context includes optional current user
6  };
7};
8
9// Instantiate the builder with necessary plugins and configurations
10export const builder = new SchemaBuilder<PothosBuilderGenericType>({ // Corrected Typo: PothosBuilderGenericTYpe -> PothosBuilderGenericType
11  plugins: [PrismaPlugin, RelayPlugin], // Enable Prisma and Relay plugins
12  relay: {}, // Basic Relay configuration
13  prisma: {
14    client: prisma, // Provide the Prisma client instance
15    // Expose Prisma schema /// comments as GraphQL descriptions
16    exposeDescriptions: true,
17    // Use Prisma's filtering capabilities for Relay connection total counts
18    filterConnectionTotalCount: true,
19    // Warn about unused query parameters during development
20    onUnusedQuery: process.env.NODE_ENV === "production" ? null : "warn",
21  },
22});

1// graphql/builder.ts
2import { lexicographicSortSchema, printSchema } from "graphql";
3// Generate the schema object from the Pothos builder
4export const pothosSchema = builder.toSchema();
5
6// Export the schema definition as a string (SDL)
7export const pothosSchemaString = printSchema(lexicographicSortSchema(pothosSchema));
8
9
10// index.ts - Server setup
11import express from 'express'; // Added import for clarity
12import { createYoga } from 'graphql-yoga'; // Added import for clarity
13import { fromNodeHeaders } from '@whatwg-node/server'; // Added import for clarity
14import { auth } from './auth'; // Assuming auth setup exists
15import { prisma } from './prismaClient'; // Assuming prisma client export exists
16import { PothosBuilderGenericType, builder, pothosSchema, pothosSchemaString } from './graphql/builder'; // Assuming builder exports exist
17// import { PrismaClient, User } from '@prisma/client'; // Assuming Prisma types import
18
19const app = express(); // Added instantiation
20const port = process.env.PORT || 4000; // Added port definition
21
22// Configure GraphQL Yoga server
23const yoga = createYoga<{
24  req: express.Request;
25  res: express.Response;
26}>({
27  // Use Apollo Sandbox for the GraphiQL interface
28  renderGraphiQL: () => {
29    // HTML to embed Apollo Sandbox
30    return `
31        <!DOCTYPE html>
32        <html lang="en">
33          <body style="margin: 0; overflow-x: hidden; overflow-y: hidden">
34          <div id="sandbox" style="height:100vh; width:100vw;"></div>
35          <script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
36          <script>
37          new window.EmbeddedSandbox({
38            target: "#sandbox",
39            initialEndpoint: "http://localhost:${port}/graphql", // Dynamic port
40          });
41          </script>
42          </body>
43        </html>`;
44  },
45  schema: pothosSchema, // Pass the generated Pothos schema
46  // Define the context function to inject data (like authenticated user) into resolvers
47  context: async (ctx): Promise<PothosBuilderGenericType['Context']> => { // Typed context return
48    try {
49      const session = await auth.api.getSession({ // Assuming auth setup provides getSession
50        headers: fromNodeHeaders(ctx.req.headers),
51      });
52      if (!session?.user) { // Check specifically for user object in session
53        return {
54          currentUser: undefined, // Explicitly undefined if no user
55        };
56      }
57      // Provide relevant user details to the context
58      return {
59        currentUser: {
60          id: session.user.id,
61          email: session.user.email ?? undefined, // Handle potentially null email
62          name: session.user.name ?? undefined,   // Handle potentially null name
63        },
64      };
65    } catch (error) {
66      console.error("Error resolving context:", error); // Add error logging
67      return { currentUser: undefined };
68    }
69  },
70  graphiql: true, // Enable GraphiQL interface
71  logging: true, // Enable logging
72  cors: true, // Enable CORS
73});
74
75// Bind GraphQL Yoga to the /graphql endpoint
76// @ts-expect-error - Yoga types might mismatch slightly with Express middleware types
77app.use(yoga.graphqlEndpoint, yoga);
78
79// Define a simple root query required by GraphQL
80builder.queryType({
81  fields: (t) => ({
82    hello: t.string({
83      resolve: () => "Hello world!",
84    }),
85    // Other root queries will be added here...
86  }),
87});
88
89// Placeholder for other express routes/middleware
90// app.get('/', (req, res) => res.send('Server is running!'));
91
92app.listen(port, () => {
93  console.log(`🚀 Server ready at http://localhost:${port}/graphql`);
94  console.log(`🚀 GraphQL Playground available at http://localhost:${port}/graphql`); // Adjusted log message
95});

1// Example of a simple Post type mapping (Not the final version used)
2/*
3export const SimplePostType = builder.prismaNode("Post", {
4  id: { field: "id" },
5  fields: (t) => ({
6    postId: t.exposeString("id", { nullable: false }), // Expose Prisma 'id' as 'postId'
7    content: t.exposeString("content"),
8    imageUrl: t.exposeString("imageUrl"),
9    createdAt: t.exposeString("createdAt", { // Directly expose createdAt as string
10      type: "String", // Define the GraphQL type
11    }),
12    updatedAt: t.exposeString("updatedAt", { // Directly expose updatedAt as string
13      type: "String",
14    }),
15    // Example resolver for the author relation
16    postedBy: t.relation("author", {
17       type: UserType // Assuming UserType is defined elsewhere
18    })
19  }),
20});
21*/

1// Define the Fren (User) type first if not already defined
2// Assuming a basic User type 'Fren' exists or is defined similarly
3export const Fren = builder.prismaNode("User", { // Example Fren type definition
4  id: { field: "id" },
5  fields: (t) => ({
6    frenId: t.exposeString("id"), // Expose 'id' as 'frenId'
7    name: t.exposeString("name"),
8    email: t.exposeString("email"),
9    image: t.exposeString("image"),
10    // Add other user fields as needed
11  }),
12});
13
14
15// Define the enhanced FeedPost type using prismaNode and custom fields
16export const FeedPost = builder.prismaNode("Post", {
17  // Using a variant allows multiple GraphQL types based on the same Prisma model if needed
18  // variant: "FeedPost", // Optional: Define a variant name
19  id: { field: "id" }, // Map the 'id' field for Relay Node interface
20  fields: (t) => ({
21    postId: t.exposeString("id", { nullable: false }), // Expose DB 'id' as 'postId'
22    content: t.exposeString("content"),
23    imageUrl: t.exposeString("imageUrl", { nullable: true }), // Explicitly nullable
24    // Custom resolver for ISO string date format
25    createdAt: t.field({
26      type: "String",
27      resolve: (post) => post.createdAt.toISOString(),
28    }),
29    // Custom resolver for ISO string date format
30    updatedAt: t.field({
31      type: "String",
32      resolve: (post) => post.updatedAt.toISOString(), // Corrected: use updatedAt
33    }),
34    // Field resolving the User who posted this
35    postedBy: t.field({
36      type: Fren, // Reference the 'Fren' (User) type
37      nullable: false, // Author should always exist
38      resolve: async (parent, args, context) => {
39        // Fetch the author using the authorId from the parent Post
40        const author = await prisma.user.findUnique({
41          where: { id: parent.authorId },
42        });
43        if (!author) {
44          // Handle case where author is somehow not found, though schema constraints should prevent this
45          throw new Error(`Author not found for post ${parent.id}`);
46        }
47        return author;
48      },
49    }),
50    // Custom field to calculate the number of likes
51    likeCount: t.field({
52      type: "Int",
53      resolve: async (parent) => {
54        // Count likes associated with the parent Post's id
55        return prisma.like.count({
56          where: { postId: parent.id },
57        });
58      },
59    }),
60    // Custom field to check if the current user liked this post
61    likedByMe: t.field({
62      type: "Boolean",
63      resolve: async (parent, args, context) => {
64        // If no user is logged in, they haven't liked it
65        if (!context.currentUser?.id) return false;
66        // Check if a Like record exists for this user and post
67        const like = await prisma.like.findUnique({ // Use findUnique for efficiency
68          where: {
69            userId_postId: { // Use the @@unique constraint defined in Prisma
70              userId: context.currentUser.id,
71              postId: parent.id,
72            }
73          },
74        });
75        // Return true if a like exists, false otherwise
76        return !!like;
77      },
78    }),
79  }),
80});

1// Extend the root query type with a field to fetch feed posts
2builder.queryType({
3  fields: (t) => ({
4    // ... existing fields like 'hello'
5    hello: t.string({ // Keeping the hello query from before
6      resolve: () => "Hello world!",
7    }),
8    // Define the feedPosts query using Relay connections
9    feedPosts: t.prismaConnection({
10      type: FeedPost, // The type of nodes in the connection
11      cursor: "id", // Field used for cursor-based pagination
12      resolve: (query, parent, args, context, info) => {
13        // Resolve by fetching posts from Prisma, applying connection arguments (like 'first', 'after')
14        return prisma.post.findMany({
15          ...query, // Spreads Relay arguments (first, after, etc.) into Prisma query
16          orderBy: {
17            createdAt: "desc", // Order posts by creation date, newest first
18          },
19        });
20      },
21    }),
22  }),
23});

1# Auto-generated GraphQL types by Pothos prismaConnection
2type QueryFeedPostsConnection {
3  edges: [QueryFeedPostsConnectionEdge] # List of edges (cursor + node)
4  pageInfo: PageInfo!                  # Information about the current page
5}
6
7type QueryFeedPostsConnectionEdge {
8  cursor: String!                       # Opaque cursor for pagination
9  node: FeedPost                        # The actual Post data
10}
11
12# Standard Relay PageInfo type
13type PageInfo {
14  hasNextPage: Boolean!
15  hasPreviousPage: Boolean!
16  startCursor: String
17  endCursor: String
18}

1// Example API endpoint to serve the SDL
2// (Add this within your Express setup in index.ts or a separate routes file)
3app.get("/sdl", (req, res) => {
4  res.type("application/graphql").send(pothosSchemaString); // Set content type
5});
6
7// Example script on the frontend (e.g., scripts/fetchSdl.ts)
8import "dotenv/config"; // If using environment variables for API URL
9import fs from "fs/promises";
10
11export async function getSdl() {
12  try {
13    const apiUrl = process.env.VITE_API_URL || "http://localhost:4000"; // Default or from env
14    console.log(`Workspaceing SDL from ${apiUrl}/sdl...`);
15    const res = await fetch(`${apiUrl}/sdl`);
16    if (!res.ok) {
17      throw new Error(`Failed to fetch SDL: ${res.status} ${res.statusText}`);
18    }
19    const sdl = await res.text();
20    await fs.writeFile("./schema.graphql", sdl); // Save to root or specified path
21    console.log("✅ SDL fetched and saved to schema.graphql");
22  } catch (error) {
23    console.error("❌ Error fetching SDL: ", error); // Improved error logging
24  }
25}
26
27// Run the script (e.g., via package.json script)
28getSdl();

1# src/components/FeedCard.tsx (or similar) - Fragment defining data needed by a single post card
2# Naming Convention: ComponentName_propName
3export const FeedCardFragment = graphql`
4  fragment FeedCard_post on FeedPost {
5    id # Global Relay ID
6    postId # Our application-specific ID
7    content
8    imageUrl
9    createdAt
10    likeCount
11    likedByMe
12    updatedAt
13    postedBy {
14      # We can include fragments from other components here too if needed
15      # Or specify the fields directly:
16      frenId # User's ID (exposed as frenId in our Fren type)
17      name
18      email
19      image
20      # Assuming 'amFollowing' fields were added to the 'Fren' type on the backend
21      # amFollowing
22    }
23  }
24`;
25
26# src/components/MainFeed.tsx - Fragment defining the list of posts needed by the feed container
27export const MainFeedFragment = graphql`
28  # Fragment on the Query type, defining arguments for pagination
29  fragment MainFeed_feedPosts on Query @argumentDefinitions(
30    first: { type: "Int", defaultValue: 10 }, # How many items to fetch
31    after: { type: "String" } # Cursor for pagination
32  ) {
33    # Use the feedPosts connection field defined in our backend query
34    feedPosts(first: $first, after: $after) {
35      edges {
36        node {
37          id # Needed for mapping and keys
38          ...FeedCard_post # Include the data requirements from the child component
39        }
40      }
41      pageInfo { # Needed for pagination logic
42        hasNextPage
43        endCursor
44      }
45    }
46  }
47`;
48
49
50# src/pages/FeedPage.tsx (or container component) - The main query for the page
51export const MainFeedQuery = graphql`
52  # This query includes the MainFeed fragment, passing arguments down
53  query MainFeedContainerQuery($first: Int!, $after: String) {
54    ...MainFeed_feedPosts @arguments(first: $first, after: $after)
55  }
56`;
57

1// src/pages/FeedPage.tsx - Root component for the feed view
2import React from 'react';
3import { useLazyLoadQuery } from 'react-relay';
4import { MainFeedContainerQuery } from './__generated__/MainFeedContainerQuery.graphql'; // Import generated types
5import { MainFeedQuery } from './MainFeed'; // Import the query definition
6import { MainFeed } from '../components/MainFeed'; // Import the component using the fragment
7
8export function FeedPage() { // Renamed component for clarity
9  // Fetch the initial data for the page using the main query
10  const queryData = useLazyLoadQuery<MainFeedContainerQuery>(MainFeedQuery, { first: 10 }); // Fetch initial 10 posts
11
12  return (
13    <div className="w-full py-4">
14      {/* Pass the query data (specifically the part matching the fragment) to the MainFeed component */}
15      <MainFeed queryRef={queryData} />
16    </div>
17  );
18}
19
20
21// src/components/MainFeed.tsx - Component rendering the list of posts
22import React from 'react';
23import { useFragment } from 'react-relay';
24import { MainFeed_feedPosts$key } from './__generated__/MainFeed_feedPosts.graphql'; // Import fragment type
25import { MainFeedFragment } from './MainFeed'; // Import fragment definition (assuming it's here or imported)
26import { PostCard } from "./FeedCard"; // Import the child component
27
28interface FeedProps {
29  queryRef: MainFeed_feedPosts$key; // Prop type expects the fragment $key
30}
31
32export function MainFeed({ queryRef }: FeedProps) { // Renamed component
33  // Use the useFragment hook to read data defined by the MainFeedFragment
34  const data = useFragment(
35    MainFeedFragment,
36    queryRef
37  );
38
39  // Extract post nodes safely
40  const posts = data?.feedPosts?.edges?.map(edge => edge?.node) ?? []; // Use optional chaining and nullish coalescing
41
42  // Render the list of posts, passing each post's data (as a fragment ref) to PostCard
43  return (
44    <div className="w-full max-w-2xl mx-auto">
45      {posts.map((post) => post && (
46        // Pass the individual post fragment reference to the PostCard
47        <PostCard key={post.id} postRef={post} />
48      ))}
49      {/* Pagination controls will be added later */}
50    </div>
51  );
52}
53
54
55// src/components/FeedCard.tsx - Component rendering a single post
56import React from 'react';
57import { useFragment } from 'react-relay';
58import { FeedCard_post$key } from "./__generated__/FeedCard_post.graphql"; // Import fragment type
59import { FeedCardFragment } from './FeedCard'; // Import fragment definition (assuming it's here or imported)
60// Assuming Card components are imported from a UI library like ShadCN/UI
61import { Card, CardContent /* ... other Card parts */ } from '@/components/ui/card';
62
63
64interface PostCardProps {
65  postRef: FeedCard_post$key; // Prop type expects the fragment $key for a single post
66  // viewer?: BetterAuthViewer; // Example of passing other props if needed
67}
68
69export function PostCard({ postRef }: PostCardProps) { // Removed viewer prop for simplicity
70  // Use useFragment to read the data defined by FeedCardFragment
71  const postData = useFragment<FeedCard_post$key>(FeedCardFragment, postRef);
72
73  // Early return if postData is somehow null/undefined (though Relay usually prevents this if ref is valid)
74  if (!postData) {
75    return null;
76  }
77
78  // Example: Using derived data or formatting
79  // const postIdFirstChars = postData?.id.substring(0, 2).toUpperCase();
80
81  return (
82    <Card className="w-full mb-4 border-none bg-base-300">
83      <CardContent className="pt-6">
84        {/* Display post content, author info, like button, etc. using postData */}
85        <p>{postData.content}</p>
86        {/* ... other card elements ... */}
87        <span>Likes: {postData.likeCount}</span>
88        <span>{postData.likedByMe ? 'You liked this' : 'Like'}</span>
89      </CardContent>
90    </Card>
91  )
92}

1# src/components/MainFeed.tsx - Updated fragment for pagination
2export const MainFeedFragment = graphql`
3  fragment MainFeed_feedPosts on Query
4  # Define arguments for pagination, Relay needs these defined here
5  @argumentDefinitions(
6    first: { type: "Int", defaultValue: 10 }, # Default items per page
7    after: { type: "String" } # Cursor to fetch items after
8  )
9  # Make this fragment refetchable, generating a MainFeedPaginationQuery
10  @refetchable(queryName: "MainFeedPaginationQuery") {
11    # Specify the connection field
12    feedPosts(first: $first, after: $after)
13    # Identify this specific connection in the Relay store
14    @connection(key: "MainFeed_feedPosts", filters: []) {
15      edges {
16        cursor # Needed for pagination
17        node {
18          id
19          ...FeedCard_post # Include child fragment
20        }
21      }
22      pageInfo {
23        endCursor
24        hasNextPage # Crucial for knowing if more data is available
25        # Optional:
26        # hasPreviousPage
27        # startCursor
28      }
29    }
30  }
31`;

1// src/components/MainFeed.tsx - Updated component using usePaginationFragment
2import React from 'react';
3// Import the specific pagination query type generated by @refetchable
4import { MainFeedPaginationQuery } from "./__generated__/MainFeedPaginationQuery.graphql";
5import { MainFeed_feedPosts$key } from './__generated__/MainFeed_feedPosts.graphql';
6import { usePaginationFragment } from 'react-relay';
7import { PostCard } from "./FeedCard";
8import { MainFeedFragment } from './MainFeed'; // Import fragment definition
9// Assuming Button and Loader components are imported
10import { Button } from '@/components/ui/button';
11import { Loader2 } from 'lucide-react';
12
13interface FeedProps {
14  queryRef: MainFeed_feedPosts$key;
15}
16
17export function MainFeed({ queryRef }: FeedProps) {
18  // Use usePaginationFragment hook
19  const {
20    data,       // The accumulated data for the connection
21    loadNext,   // Function to load the next page
22    hasNext,    // Boolean indicating if more pages exist
23    isLoadingNext // Boolean indicating if the next page is currently loading
24  } = usePaginationFragment<MainFeedPaginationQuery, MainFeed_feedPosts$key>(
25    MainFeedFragment, // The fragment definition
26    queryRef         // The fragment reference passed from the parent
27  );
28
29  // Function to trigger loading more posts
30  const loadMorePosts = () => {
31    // Prevent multiple requests or loading if no more data
32    if (isLoadingNext || !hasNext) return;
33    loadNext(5); // Load the next 5 items (or adjust count as needed)
34  };
35
36  // Extract post nodes from the accumulated data
37  const posts = data?.feedPosts?.edges?.map(edge => edge?.node) ?? [];
38
39  return (
40    <div className="w-full max-w-2xl mx-auto">
41      {posts.map((post) => post && (
42        <PostCard key={post.id} postRef={post} />
43      ))}
44
45      {/* Display a "Load More" button if there's a next page */}
46      {hasNext && (
47        <div className="flex justify-center my-4">
48          <Button onClick={loadMorePosts} variant="outline" disabled={isLoadingNext}>
49            {isLoadingNext ? (
50              <>
51                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
52                Loading more posts...
53              </>
54            ) : (
55              "Load More Posts"
56            )}
57          </Button>
58        </div>
59      )}
60    </div>
61  );
62}

1# src/components/PostDialogs.tsx (or similar) - Edit Mutation
2const editPostMutation = graphql`
3  mutation PostDialogsEditMutation($id: ID!, $content: String, $imageUrl: String) { # Use global ID!
4    # Assume backend mutation 'updatePost' takes global ID
5    updatePost(input: {id: $id, content: $content, imageUrl: $imageUrl}) { # Example input object
6      # Return the fragment for the updated post
7      updatedPostEdge { # Assuming mutation returns an edge or node
8         node {
9           ...FeedCard_post # Spreading the fragment triggers automatic update if ID matches
10         }
11      }
12    }
13  }
14`;

1# src/components/PostDialogs.tsx - Create Mutation
2const createPostMutation = graphql`
3  mutation PostDialogsCreateMutation($content: String!, $imageUrl: String) {
4    # Assume backend mutation 'createPost' takes content/imageUrl
5    createPost(input: { content: $content, imageUrl: $imageUrl }) {
6      # Return the fragment for the newly created post, wrapped in an edge
7      newPostEdge { # Standard Relay practice to return the new edge
8         cursor
9         node {
10            ...FeedCard_post # Include the fragment data
11         }
12      }
13    }
14  }
15`;

1// src/components/PostDialogs.tsx - Usage of create mutation
2import { useMutation, ConnectionHandler } from 'react-relay';
3import { PostDialogsCreateMutation } from './__generated__/PostDialogsCreateMutation.graphql'; // Generated type
4
5// Inside your component...
6const [commitCreateMutation, isCreating] = useMutation<PostDialogsCreateMutation>(createPostMutation);
7// Assuming 'setError' state hook exists
8const setError = (e: Error | null) => { /* ... */ };
9// Assuming PostFormData type exists
10type PostFormData = { content: string; imageUrl?: string };
11
12const handleCreateSubmit = (data: PostFormData) => {
13  setError(null);
14  commitCreateMutation({
15    variables: {
16      content: data.content,
17      imageUrl: data.imageUrl || undefined, // Use undefined if optional
18    },
19    // Updater function to manually insert the new post into the connection
20    updater: (store) => {
21      // Get the newly created post edge from the mutation response payload
22      const payload = store.getRootField("createPost"); // Matches mutation name
23      const newEdge = payload?.getLinkedRecord("newPostEdge"); // Matches field in mutation response
24
25      if (!newEdge) {
26        console.error("Failed to get new edge from createPost mutation payload");
27        return;
28      }
29
30      // Get the connection record from the store
31      const root = store.getRoot();
32      // Use the connection key defined in the @connection directive
33      const connection = ConnectionHandler.getConnection(
34        root,
35        "MainFeed_feedPosts" // Must match the key in MainFeedFragment @connection
36      );
37
38      if (!connection) {
39         console.error("Failed to find connection MainFeed_feedPosts in store");
40        return;
41      }
42
43      // Insert the new edge at the beginning of the connection
44      ConnectionHandler.insertEdgeBefore(connection, newEdge);
45    },
46    onError: (error) => {
47       setError(error);
48       console.error("Create post failed:", error);
49    }
50  });
51};

1# src/components/PostDialogs.tsx - Delete Mutation
2const deletePostMutation = graphql`
3  mutation PostDialogsDeleteMutation($id: ID!) { # Use global ID!
4    deletePost(input: { id: $id }) {
5      deletedPostId # Return the ID of the deleted post
6    }
7  }
8`;

1// src/components/PostDialogs.tsx - Usage of delete mutation
2import { useMutation, ConnectionHandler } from 'react-relay';
3import { PostDialogsDeleteMutation } from './__generated__/PostDialogsDeleteMutation.graphql';
4
5// Inside your component, assuming 'post' object with 'id' (global Relay ID) exists
6// const post: { id: string, postId: string /* ... other fields */ };
7const [commitDeleteMutation, isDeleting] =
8  useMutation<PostDialogsDeleteMutation>(deletePostMutation);
9const setError = (e: Error | null) => { /* ... */ };
10
11const handleDeletePost = () => {
12  setError(null);
13
14  commitDeleteMutation({
15    variables: {
16      id: post.id, // Pass the global Relay ID
17    },
18    // Updater function to remove the node from the connection
19    updater: (store) => {
20      // Get the ID of the deleted post from the payload
21      const payload = store.getRootField("deletePost");
22      const deletedId = payload?.getValue("deletedPostId"); // Matches field in mutation
23
24      if (typeof deletedId !== 'string') {
25         console.error("Could not get deletedPostId from payload");
26         return;
27      }
28
29      // Get the connection
30      const root = store.getRoot();
31      const connection = ConnectionHandler.getConnection(root, "MainFeed_feedPosts");
32
33      if (!connection) {
34         console.error("Failed to find connection MainFeed_feedPosts in store");
35        return;
36      }
37
38      // Remove the node using its ID
39      ConnectionHandler.deleteNode(connection, deletedId);
40    },
41    // Optimistic updater removes the item from the UI immediately
42    optimisticUpdater: (store) => {
43        const root = store.getRoot();
44        const connection = ConnectionHandler.getConnection(root, "MainFeed_feedPosts");
45        if (connection) {
46          // Remove the node optimistically using its known ID
47          ConnectionHandler.deleteNode(connection, post.id);
48        }
49    },
50    onError: (error) => {
51       setError(error);
52       console.error("Delete post failed:", error);
53    }
54  });
55};