feat(examples): use experimental edge runtime with grafbase (vercel#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)

Author: notrab

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)
 

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) {

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 }) {

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,
   }
 )

examples/with-grafbase/next.config.js

@@ -3,6 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   experimental: {
     appDir: true,
+    runtime: 'experimental-edge',
   },
 }