feat(examples): use experimental edge runtime with grafbase (#42992)

This PR adds the experimental runtime as shown in a guide that links to this example. ## Examples - [x] Make sure the linting passes by running `pnpm build && pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
vercel · Nov 17, 2022 · 0440404 · 0440404
1 parent 533c242
commit 0440404
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 9 deletions.
diff --git 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%2Fgh.neting.cc%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%2Fgh.neting.cc%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
@@ -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
@@ -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
@@ -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
@@ -3,6 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   experimental: {
     appDir: true,
+    runtime: 'experimental-edge',
   },
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,5 +7,6 @@ export const grafbase = new GraphQLClient( @@
         headers: {
           'x-api-key': process.env.GRAFBASE_API_KEY as string,
         },
+        fetch,
       }
     )