Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from Nov 17, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e1b902e
feat(config): use experimental edge runtime
notrab Nov 16, 2022
5afb132
fix fetch position
notrab Nov 16, 2022
0de430b
update readme
notrab Nov 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 3 additions & 7 deletions examples/with-grafbase/README.md
View file
Open in desktop
Expand Up @@ -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)

Expand Down
2 changes: 2 additions & 0 deletions examples/with-grafbase/app/layout.tsx
View file
Open in desktop
Expand Up @@ -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) {
Expand Down
2 changes: 0 additions & 2 deletions examples/with-grafbase/app/posts/[slug]/page.tsx
View file
Open in desktop
@@ -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 }) {
Expand Down
1 change: 1 addition & 0 deletions examples/with-grafbase/lib/grafbase.ts
View file
Open in desktop
Expand Up @@ -7,5 +7,6 @@ export const grafbase = new GraphQLClient(
headers: {
'x-api-key': process.env.GRAFBASE_API_KEY as string,
},
fetch,
}
)
1 change: 1 addition & 0 deletions examples/with-grafbase/next.config.js
View file
Open in desktop
Expand Up @@ -4,6 +4,7 @@ const nextConfig = {
swcMinify: true,
experimental: {
appDir: true,
runtime: 'experimental-edge',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding this to the root config will currently make all app paths dynamic and revalidate won't be able to be honored currently.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice 👌

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the mentioned behavior desired? If so it may confuse users as revalidate is being configured but not used here.

Copy link
Contributor Author

@notrab notrab Nov 17, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ijjk I totally missed revalidate was still exported. Thank you

I will update this to be export const revalidate = 0 so it's always rendered dynamically or remove it completely...

},
}

Expand Down