Next.js Discord

Discord Forum

api route gives a hydration error on the api route

Whimbrel posted this in #help-forum
Open in Discord
I am using pothos-prisma to create a graphql api enfpoint.
but i am getting a hydration error on the route /api/graphql
// app/api/graphql.ts
import { createYoga } from 'graphql-yoga'
import type { NextApiRequest, NextApiResponse } from 'next'
import { schema } from '../../graphql/schema'

export default createYoga<{
  req: NextApiRequest
  res: NextApiResponse
  graphqlEndpoint: '/api/graphql'

export const config = {
  api: {
    bodyParser: false

10 Replies

// schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")

generator client {
  provider      = "prisma-client-js"
  output = "../node_modules/.prisma/client"

generator pothos {
  provider = "prisma-pothos-types"

model User {
  id         Int      @id @default(autoincrement())
  name       String   @unique
  email      String   @unique
  avatarUrl  String?  @db.Text
  bio        String?  @db.Text
  githubUrl  String?  @db.Text
  linkedinUrl String? @db.Text
  projects   Project[]

model Project {
  id          Int      @id
  title       String   @db.VarChar(min: 3)
  description String   @db.Text
  imageUrl       String   @db.Text
  liveSiteUrl String   @db.Text
  githubUrl   String   @db.Text
  category    String   @db.VarChar(min: 3)
  createdBy   User     @relation(fields: [createdById], references: [id])
  createdById Int
// graphql/types/User.ts
import { builder } from "../builder";

builder.prismaObject('User', {
  fields: (t) => ({
    id: t.exposeID('id'),
    name: t.exposeString('name', { nullable: true, }),
    email: t.exposeString('email', { nullable: true, }),
    bio: t.exposeString('bio'),
    avatarUrl: t.exposeString('avatarUrl'),
    githubUrl: t.exposeString('githubUrl'),
    linkedinUrl: t.exposeString("linkedinUrl"),
    projects: t.relation('projects')
// graphql/types/Project.ts
import { builder } from "../builder";

builder.prismaObject('Project', {
  fields: (t) => ({
    id: t.exposeID('id'),
    title: t.exposeString('title'),
    description: t.exposeString('description'),
    imageUrl: t.exposeString('imageUrl'),
    livesiteurl: t.exposeString("liveSiteUrl"),
    createdBy: t.exposeID(),
    category: t.exposeString('category'),
this is the error that i get on localhost:3000/api/graphql
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <h1> in <div>.

See more info here:

Component Stack
// app/page.ts
export default function Home() {
  return (
// app/layout.ts
export default function RootLayout({
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
Alfonsus Ardani
Next.js doesnt read graphql.ts
Nextjs app route API handler must be contained inside any route.ts file
You are following a tutorial that uses the pages dir while you used the app dir