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)
This commit is contained in:
parent
533c242094
commit
0440404893
5 changed files with 7 additions and 9 deletions
|
@ -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)
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 }) {
|
||||
|
|
|
@ -7,5 +7,6 @@ export const grafbase = new GraphQLClient(
|
|||
headers: {
|
||||
'x-api-key': process.env.GRAFBASE_API_KEY as string,
|
||||
},
|
||||
fetch,
|
||||
}
|
||||
)
|
||||
|
|
|
@ -3,6 +3,7 @@ const nextConfig = {
|
|||
reactStrictMode: true,
|
||||
experimental: {
|
||||
appDir: true,
|
||||
runtime: 'experimental-edge',
|
||||
},
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue