api route gives a hydration error on the api route
Unanswered
Whimbrel posted this in #help-forum
WhimbrelOP
I am using pothos-prisma to create a graphql api enfpoint.
but i am getting a hydration error on the route /api/graphql
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
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
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>
)
}
Next.js doesnt read graphql.ts
Nextjs app route API handler must be contained inside any
route.ts
fileYou are following a tutorial that uses the
pages
dir while you used the app
dir