diff --git a/examples/with-grafbase/README.md b/examples/with-grafbase/README.md index e5e1ae94b314a..b765f73c84ed1 100644 --- a/examples/with-grafbase/README.md +++ b/examples/with-grafbase/README.md @@ -4,15 +4,11 @@ This example shows to use [Grafbase](https://grafbase.com) with Next.js. This ex ## Demo -You can see a demo of this online at [https://grafbase-with-nextjs-rsc.grafbase-vercel.dev](https://grafbase-with-nextjs-rsc.grafbase-vercel.dev). +You can see a demo of this online at [https://nextjs-rsc-demo.grafbase-vercel.dev](https://nextjs-rsc-demo.grafbase-vercel.dev). -## Deploy +## Deploy to Vercel -First deploy this to Grafbase to get your backend API URL and Key: - -[![Deploy to Grafbase](https://grafbase.com/button)](https://grafbase.com/new/configure?template=NextExample&source=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-grafbase) - -Then deploy this example using [Vercel](https://vercel.com): +Make sure to provide your `GRAFBASE_API_URL` and `GRAFBASE_API_KEY` to Vercel as environment variables when deploying. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-grafbase&env=GRAFBASE_API_URL,GRAFBASE_API_KEY) diff --git a/examples/with-grafbase/app/layout.tsx b/examples/with-grafbase/app/layout.tsx index 45c1915918612..fa41a9baaa089 100644 --- a/examples/with-grafbase/app/layout.tsx +++ b/examples/with-grafbase/app/layout.tsx @@ -5,6 +5,8 @@ import Link from 'next/link' import { graphql } from '../gql' import { grafbase } from '../lib/grafbase' +export const revalidate = 0 + const GetAllPostsDocument = graphql(/* GraphQL */ ` query GetAllPosts($first: Int!) { postCollection(first: $first) { diff --git a/examples/with-grafbase/app/posts/[slug]/page.tsx b/examples/with-grafbase/app/posts/[slug]/page.tsx index 2443b0f1ef559..4c3c332a9e123 100644 --- a/examples/with-grafbase/app/posts/[slug]/page.tsx +++ b/examples/with-grafbase/app/posts/[slug]/page.tsx @@ -1,8 +1,6 @@ import { graphql } from '../../../gql' import { grafbase } from '../../../lib/grafbase' -export const revalidate = 3600 - const GetPostBySlugDocument = graphql(/* GraphQL */ ` query GetPostBySlug($slug: String!) { post(by: { slug: $slug }) { diff --git a/examples/with-grafbase/lib/grafbase.ts b/examples/with-grafbase/lib/grafbase.ts index d2cf5dc2f1ab2..fbb8f9acc5515 100644 --- a/examples/with-grafbase/lib/grafbase.ts +++ b/examples/with-grafbase/lib/grafbase.ts @@ -7,5 +7,6 @@ export const grafbase = new GraphQLClient( headers: { 'x-api-key': process.env.GRAFBASE_API_KEY as string, }, + fetch, } ) diff --git a/examples/with-grafbase/next.config.js b/examples/with-grafbase/next.config.js index 9181109f78b7c..0203669b424f0 100644 --- a/examples/with-grafbase/next.config.js +++ b/examples/with-grafbase/next.config.js @@ -3,6 +3,7 @@ const nextConfig = { reactStrictMode: true, experimental: { appDir: true, + runtime: 'experimental-edge', }, }