Cara Streamline GraphQL API Development dengan Claude Code

Why Claude Code Is Effective for GraphQL Development

GraphQL API development requires managing multiple files simultaneously — schema definitions, resolver implementations, type generation, and client code. Claude Code can generate and modify all of these consistently while understanding your entire project.

Requesting Schema Design

> Design a GraphQL schema for a blog app.
> Define three types: User, Post, and Comment.
> Implement cursor-based pagination.

Here’s an example schema Claude Code generates.

type User {
  id: ID!
  name: String!
  email: String!
  posts(first: Int, after: String): PostConnection!
  createdAt: DateTime!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
  comments(first: Int, after: String): CommentConnection!
  publishedAt: DateTime
  createdAt: DateTime!
}

type Comment {
  id: ID!
  body: String!
  author: User!
  post: Post!
  createdAt: DateTime!
}

type PostConnection {
  edges: [PostEdge!]!
  pageInfo: PageInfo!
}

type PostEdge {
  node: Post!
  cursor: String!
}

type PageInfo {
  hasNextPage: Boolean!
  endCursor: String
}

type Query {
  user(id: ID!): User
  posts(first: Int, after: String): PostConnection!
  post(id: ID!): Post
}

type Mutation {
  createPost(input: CreatePostInput!): Post!
  updatePost(id: ID!, input: UpdatePostInput!): Post!
  deletePost(id: ID!): Boolean!
  addComment(postId: ID!, input: AddCommentInput!): Comment!
}

input CreatePostInput {
  title: String!
  content: String!
}

input UpdatePostInput {
  title: String
  content: String
}

input AddCommentInput {
  body: String!
}

Implementing Resolvers

Once the schema is defined, request the resolver implementation.

> Implement resolvers for the above schema in TypeScript.
> Use Prisma for DB access.
> Use DataLoader to prevent N+1 problems.

import DataLoader from 'dataloader';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

const userLoader = new DataLoader(async (ids: readonly string[]) => {
  const users = await prisma.user.findMany({
    where: { id: { in: [...ids] } },
  });
  const userMap = new Map(users.map(u => [u.id, u]));
  return ids.map(id => userMap.get(id) ?? null);
});

export const resolvers = {
  Query: {
    user: (_: unknown, { id }: { id: string }) =>
      prisma.user.findUnique({ where: { id } }),

    posts: async (_: unknown, { first = 10, after }: { first?: number; after?: string }) => {
      const posts = await prisma.post.findMany({
        take: first + 1,
        ...(after && { cursor: { id: after }, skip: 1 }),
        orderBy: { createdAt: 'desc' },
      });

      const hasNextPage = posts.length > first;
      const edges = posts.slice(0, first).map(post => ({
        node: post,
        cursor: post.id,
      }));

      return {
        edges,
        pageInfo: {
          hasNextPage,
          endCursor: edges[edges.length - 1]?.cursor ?? null,
        },
      };
    },

    post: (_: unknown, { id }: { id: string }) =>
      prisma.post.findUnique({ where: { id } }),
  },

  Post: {
    author: (post: { authorId: string }) => userLoader.load(post.authorId),
  },

  Mutation: {
    createPost: (_: unknown, { input }: { input: { title: string; content: string } }, ctx: { userId: string }) =>
      prisma.post.create({
        data: { ...input, authorId: ctx.userId },
      }),

    deletePost: async (_: unknown, { id }: { id: string }) => {
      await prisma.post.delete({ where: { id } });
      return true;
    },
  },
};

Generating Type-Safe Client Code

> Create a GraphQL Code Generator configuration.
> Include auto-generation of React custom hooks.

// codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'http://localhost:4000/graphql',
  documents: 'src/**/*.graphql',
  generates: {
    'src/generated/graphql.ts': {
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-react-apollo',
      ],
      config: {
        withHooks: true,
        withComponent: false,
      },
    },
  },
};

export default config;

Auto-Generating Tests

You can also delegate resolver tests to Claude Code.

> Write tests for the posts query and createPost mutation.
> Use SQLite as the test database.

import { createTestServer } from './test-utils';

describe('Posts', () => {
  const server = createTestServer();

  it('should fetch paginated posts', async () => {
    const res = await server.executeOperation({
      query: `
        query GetPosts($first: Int) {
          posts(first: $first) {
            edges { node { id title } }
            pageInfo { hasNextPage endCursor }
          }
        }
      `,
      variables: { first: 5 },
    });

    expect(res.body.singleResult.errors).toBeUndefined();
    expect(res.body.singleResult.data?.posts.edges).toHaveLength(5);
  });

  it('should create a post', async () => {
    const res = await server.executeOperation({
      query: `
        mutation CreatePost($input: CreatePostInput!) {
          createPost(input: $input) { id title content }
        }
      `,
      variables: { input: { title: 'Test', content: 'Hello' } },
    });

    expect(res.body.singleResult.data?.createPost.title).toBe('Test');
  });
});

Effective Prompt Tips

The key to using Claude Code for GraphQL development is clearly communicating your schema design approach. For more on prompt writing, see the Complete Prompt Techniques Guide. Documenting your GraphQL conventions in CLAUDE.md will yield more consistent code.

Summary

With Claude Code, you can efficiently handle the entire GraphQL workflow — from schema design to resolver implementation, type generation, and testing. It’s especially powerful for accurately generating commonly error-prone areas like N+1 prevention and pagination implementation.

For more details, see the official Anthropic documentation. For GraphQL best practices, check the GraphQL official site.