Add Relay example with TypeScript using Next.js compiler

examples/with-relay-modern/README.md

@@ -1,49 +1 @@
-# Relay Modern Example
-
-[Relay Modern](https://relay.dev/) is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.
-
-This example relies on [Prisma + Nexus](https://github.com/prisma-labs/nextjs-graphql-api-examples) for its GraphQL backend.
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-relay-modern&project-name=with-relay-modern&repository-name=with-relay-modern)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-relay-modern with-relay-modern-app
-# or
-yarn create next-app --example with-relay-modern with-relay-modern-app
-# or
-pnpm create next-app --example with-relay-modern with-relay-modern-app
-```
-
-Download schema introspection data from configured Relay endpoint
-
-```bash
-npm run schema
-# or
-yarn schema
-```
-
-Run Relay ahead-of-time compilation (should be re-run after any edits to components that query data with Relay)
-
-```bash
-npm run relay
-# or
-yarn relay
-```
-
-Run the project
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+This example has been moved to [with-relay](https://github.com/vercel/next.js/tree/canary/examples/with-relay).

examples/with-relay/.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_GRAPHQL_API_ENDPOINT="https://api.github.com/graphql"
+NEXT_PUBLIC_GITHUB_API_TOKEN=

examples/with-relay-modern/.gitignore → examples/with-relay/.gitignore

@@ -23,16 +23,16 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel
 
-# relay
-__generated__/
-schema/schema.graphql
+# typescript
+*.tsbuildinfo
+
+# Relay
+__generated__/**

examples/with-relay/README.md

@@ -0,0 +1,35 @@
+# Relay and TypeScript Example
+
+This example shows how to integrate Relay in Next.js. The application is built with TypeScript and
+leverages the
+[Next.js compiler's built-in Relay support](https://nextjs.org/docs/advanced-features/compiler#relay)
+for converting GraphQL operations to runtime artifacts.
+
+Note this example uses with the [GitHub GraphQL API](https://docs.github.com/en/graphql) which requires authentication. In order to make requests to the API, you must first [generate a personal access token on GitHub](https://github.com/settings/tokens/new) and store it in the environment variable `NEXT_PUBLIC_GITHUB_API_TOKEN`.
+
+## Deploy your own
+
+Deploy the example using
+[Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or
+preview live with
+[StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-relay)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-relay&project-name=with-relay&repository-name=with-relay)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
+with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/),
+or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-relay with-relay-app
+# or
+yarn create next-app --example with-relay with-relay-app
+# or
+pnpm create next-app --example with-relay with-relay-app
+```
+
+Deploy it to the cloud with
+[Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example)
+([Documentation](https://nextjs.org/docs/deployment)).

examples/with-relay/codegen.yml

@@ -0,0 +1,8 @@
+schema:
+  - ${NEXT_PUBLIC_GRAPHQL_API_ENDPOINT}:
+      headers:
+        Authorization: Bearer ${NEXT_PUBLIC_GITHUB_API_TOKEN}
+generates:
+  ./schema.graphql:
+    plugins:
+      - schema-ast

examples/with-relay/graphql/IssuesQuery.ts

@@ -0,0 +1,21 @@
+import { graphql } from 'relay-runtime'
+
+export default graphql`
+  query IssuesQuery($owner: String!, $name: String!, $first: Int!) {
+    repository(name: $name, owner: $owner) {
+      issues(
+        first: $first
+        states: [OPEN]
+        orderBy: { field: UPDATED_AT, direction: DESC }
+      ) {
+        edges {
+          node {
+            number
+            title
+            url
+          }
+        }
+      }
+    }
+  }
+`