Next.js Discord

Discord Forum

api route gives a hydration error on the api route

Unanswered
Whimbrel posted this in #help-forum
Open in Discord
Avatar
WhimbrelOP
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
}>({
  schema,
  graphqlEndpoint: '/api/graphql'
})

export const config = {
  api: {
    bodyParser: false
  }
}

10 Replies

Avatar
WhimbrelOP
also i am following this post https://www.prisma.io/blog/series/fullstack-nextjs-and-graphql-md1tczpfz1
// 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: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
h1
div
div
Avatar
WhimbrelOP
// app/page.ts
export default function Home() {
  return (
    <>
    </>
  )
}
// app/layout.ts
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        </body>
    </html>
  )
}
Avatar
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