From 044040489364825f5f20399a5790ccff30b4f948 Mon Sep 17 00:00:00 2001
From: Jamie Barton <jamie@notrab.dev>
Date: Thu, 17 Nov 2022 22:02:55 +0000
Subject: [PATCH] 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)
---
 examples/with-grafbase/README.md                 | 10 +++-------
 examples/with-grafbase/app/layout.tsx            |  2 ++
 examples/with-grafbase/app/posts/[slug]/page.tsx |  2 --
 examples/with-grafbase/lib/grafbase.ts           |  1 +
 examples/with-grafbase/next.config.js            |  1 +
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/examples/with-grafbase/README.md b/examples/with-grafbase/README.md
index e5e1ae94b314a69..b765f73c84ed1d0 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 45c19159186122c..fa41a9baaa089ca 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 2443b0f1ef559b0..4c3c332a9e1239e 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 d2cf5dc2f1ab26f..fbb8f9acc551597 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 9181109f78b7cd4..0203669b424f060 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',
   },
 }