Integration of KeystoneJS with Frontend via GraphQL API

Problem: KeystoneJS generates a GraphQL API, but integration with the frontend often leads to type mismatch — the frontend uses fields that don't exist in the schema or makes mistakes in mutations. Pagination via take/skip without proper caching results in duplicate records, and authentication requires careful middleware configuration. We, a team with over 5 years of experience with KeystoneJS, have set up this stack for 30+ projects, reducing bugs by 90% and accelerating releases twofold. A typical integration on Next.js + Apollo Client with codegen takes 3–5 days turnkey. Get a free audit of your KeystoneJS schema — we'll find bottlenecks and propose an integration plan.

What KeystoneJS Generates

For each List, e.g., Post, standard queries and mutations are created (KeystoneJS GraphQL API):

• post(where: PostWhereUniqueInput!): Post
• posts(where: PostWhereInput, orderBy: [...], take: Int, skip: Int): [Post!]
• postsCount(where: PostWhereInput): Int
• createPost(data: PostCreateInput!): Post
• createPosts(data: [PostCreateInput!]!): [Post]
• updatePost(where: PostWhereUniqueInput!, data: PostUpdateInput!): Post
• deletePost(where: PostWhereUniqueInput!): Post

This eliminates repetitive coding. However, without codegen, it's easy to mistype a field name or forget to select nested relations (N+1 problem), increasing development cost by 30-50%.

How to Set Up Apollo Client for KeystoneJS

Apollo Client is the most popular GraphQL client for React. Setup includes an HTTP link to the endpoint, authentication middleware, and error handling. Here's an example for Next.js with cookie sessions (Apollo Client documentation):

// lib/apollo.ts import { ApolloClient, InMemoryCache, createHttpLink, from } from '@apollo/client'; import { setContext } from '@apollo/client/link/context'; import { onError } from '@apollo/client/link/error'; const httpLink = createHttpLink({ uri: process.env.NEXT_PUBLIC_KEYSTONE_URL + '/api/graphql', credentials: 'include', }); const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: getToken() ? `Bearer ${getToken()}` : '', }, })); const errorLink = onError(({ graphQLErrors }) => { if (graphQLErrors?.some(e => e.extensions?.code === 'UNAUTHENTICATED')) { window.location.href = '/login'; } }); export const apolloClient = new ApolloClient({ link: from([errorLink, authLink, httpLink]), cache: new InMemoryCache({ typePolicies: { Query: { fields: { posts: { keyArgs: ['where', 'orderBy'], merge: (existing = [], incoming) => [...existing, ...incoming], }, }, }, }, }), }); 

This block combines authentication and pagination. Compared to direct fetch, Apollo Client provides automatic caching, invalidation, and convenient hooks — reducing code by 40%.

Why Codegen Speeds Up Development by 3x

GraphQL Code Generator creates TypeScript types and hooks from your schema. Configuration is trivial:

# codegen.yml schema: http://localhost:3000/api/graphql documents: "src/**/*.graphql" generates: src/generated/graphql.ts: plugins: - typescript - typescript-operations - typescript-react-apollo 

Example query:

# src/queries/posts.graphql query GetPosts($where: PostWhereInput, $take: Int, $skip: Int) { posts(where: $where, take: $take, skip: $skip, orderBy: [{ publishedAt: desc }]) { id, title, slug, publishedAt, status author { id, name } tags { id, name } } postsCount(where: $where) } 

After generation, you get ready-to-use hooks with autocompletion. This fully eliminates field name and query errors, saving up to 60% of debugging time.

How to Use in Next.js Server Components

In Server Components, queries are executed server-side. We use a server Apollo client:

// app/blog/page.tsx import { getClient } from '@/lib/apollo-server'; import { GetPostsDocument } from '@/generated/graphql'; export default async function BlogPage({ searchParams }) { const page = Number(searchParams.page) || 1; const { data } = await getClient().query({ query: GetPostsDocument, variables: { where: { status: { equals: 'published' } }, take: 10, skip: (page - 1) * 10 }, }); return <PostGrid posts={data.posts} total={data.postsCount} page={page} />; } 

Mutations in Client Components

For write operations, we use client components:

'use client'; import { useMutation } from '@apollo/client'; import { CreatePostDocument } from '@/generated/graphql'; export function NewPostForm() { const [createPost, { loading, error }] = useMutation(CreatePostDocument, { update(cache, { data }) { cache.evict({ fieldName: 'posts' }); }, }); const handleSubmit = async (formData) => { const { data } = await createPost({ variables: { data: { title: formData.title, slug: formData.slug, content: { document: formData.content }, author: { connect: { id: currentUserId } }, status: 'draft' }, }, }); router.push(`/admin/posts/${data?.createPost?.id}`); }; } 

Comparison: Apollo Client vs fetch

Using Apollo Client reduces development time by 2–3 days compared to raw fetch, significantly saving project budget.

How to Avoid Common Integration Mistakes

Step-by-Step Integration Plan

1. Analyze KeystoneJS schema — check Lists, relations, permissions, and hooks.
2. Set up Apollo Client — create server and client instances with middleware.
3. Configure codegen — generate TypeScript types and hooks.
4. Implement queries — selected List, pagination, sorting.
5. Implement mutations — CRUD for admin interfaces.
6. Authentication — session or JWT, secure routes.
7. Testing — unit tests with Apollo MockedProvider.

What the Integration Service Includes

• Audit of existing KeystoneJS configuration.
• Setup of Apollo Client with cache optimization.
• Code generation via GraphQL Code Generator.
• Implementation of queries and mutations for critical Lists.
• Integration of authentication (session/JWT).
• Documentation on using generated hooks.
• 2 weeks of support after delivery.

We guarantee that all queries pass code review and testing. Contact us for a consultation so we can analyze your current schema and propose the best integration plan.

Our Team's Experience

We have been working with KeystoneJS and GraphQL for over 5 years. During this time, we completed 30+ projects, including integration with e-commerce stores, SaaS platforms, and corporate portals. Average NPS — 9.2. Client budget savings reached up to 50% compared to alternative solutions. Reach out to discuss your project.