feat: relay todo list example (wundergraph#878)

* feat: created nextjs todos example app

* feat: added wundergraph

* feat: todos graphql server

* feat: setup relay todo list component

* feat: setup alias for id

* fix: use sse for subscribing to the upstream

* feat: added getEnvironment function to implement render-as-you-fetch

* feat: setup css for todo list example

* feat: added subscription updater

* feat: added render-as-fetch pattern to vite example

* fix: next.js build issue with loadQuery

* ci: added nuxt to ignore list of example tests

---------

Co-authored-by: fiam <[email protected]>

examples/nextjs-relay-todos/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["relay"]
+}

examples/nextjs-relay-todos/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# WunderGraph generated files
+**/.wundergraph/generated

examples/nextjs-relay-todos/.wundergraph/operations/relay/2f7a7ed13c67c406b6adaacf8aea2780.graphql

@@ -0,0 +1,11 @@
+query pagesAllTodosQuery {
+  todos_todos {
+    ...TodoList_todo
+  }
+}
+
+fragment TodoList_todo on todos_Todo {
+  id
+  text
+  isCompleted
+}

examples/nextjs-relay-todos/.wundergraph/operations/relay/3ece2b70448e57683ea10290c6a68b8b.graphql

@@ -0,0 +1,7 @@
+subscription pagesOnTodoChangesSubscription {
+  todos_TodoChanges {
+    todoID: id
+    text
+    isCompleted
+  }
+}

examples/nextjs-relay-todos/.wundergraph/operations/relay/5ce551f3c418699ad61443ed34aa470f.graphql

@@ -0,0 +1,9 @@
+mutation TodoListAddTodoMutation(
+  $todo: todos_NewTodoInput!
+) {
+  todos_addTodo(todo: $todo) {
+    id
+    text
+    isCompleted
+  }
+}

examples/nextjs-relay-todos/.wundergraph/operations/relay/6dc98b91e0f73f84e44e58184ee19888.graphql

@@ -0,0 +1,9 @@
+mutation TodoListUpdateTodoMutation(
+  $todo: todos_TodoInput!
+) {
+  todos_updateTodo(todo: $todo) {
+    id
+    text
+    isCompleted
+  }
+}

examples/nextjs-relay-todos/.wundergraph/operations/relay/a5cecd8875e6f3a3e5c3b863fcc36307.graphql

@@ -0,0 +1,11 @@
+query pagesAllTodosQuery {
+  todos_todos {
+    ...Todo_todo
+  }
+}
+
+fragment Todo_todo on todos_Todo {
+  id
+  text
+  isCompleted
+}

examples/nextjs-relay-todos/.wundergraph/operations/relay/af225b2bbacefc886c76d7f5f8246f2a.graphql

@@ -0,0 +1,9 @@
+mutation TodoListUpdateTodoMutation(
+  $todo: todos_TodoInput!
+) {
+  todos_updateTodo(todo: $todo) {
+    todoId: id
+    text
+    isCompleted
+  }
+}

examples/nextjs-relay-todos/.wundergraph/operations/relay/b3ff09b4512fd243f62645978b3386e4.graphql

@@ -0,0 +1,7 @@
+subscription pagesOnTodoChangesSubscription {
+  todos_TodoChanges {
+    id
+    text
+    isCompleted
+  }
+}

examples/nextjs-relay-todos/.wundergraph/operations/relay/d69bdc4fc8c499251eaee6a38e7a3383.graphql

@@ -0,0 +1,11 @@
+query pagesAllTodosQuery {
+  todos_todos {
+    ...Todo_todo
+  }
+}
+
+fragment Todo_todo on todos_Todo {
+  todoID: id
+  text
+  isCompleted
+}

examples/nextjs-relay-todos/.wundergraph/operations/relay/dd5333a71b886a8ea4a0024f1d20dc13.graphql

@@ -0,0 +1,7 @@
+subscription pages_onTodoChangesSubscription {
+  todos_TodoChanges {
+    id
+    text
+    isCompleted
+  }
+}

examples/nextjs-relay-todos/.wundergraph/operations/relay/f1fd8268007d6d1ee65b16be25075648.graphql

@@ -0,0 +1,11 @@
+subscription pagesOnTodoChangesSubscription {
+  todos_TodoChanges {
+    ...Todo_todo
+  }
+}
+
+fragment Todo_todo on todos_Todo {
+  todoID: id
+  text
+  isCompleted
+}

examples/nextjs-relay-todos/.wundergraph/operations/relay/persisted.json

@@ -0,0 +1,11 @@
+{
+  "2f7a7ed13c67c406b6adaacf8aea2780": "query pagesAllTodosQuery {\n  todos_todos {\n    ...TodoList_todo\n  }\n}\n\nfragment TodoList_todo on todos_Todo {\n  id\n  text\n  isCompleted\n}\n",
+  "3ece2b70448e57683ea10290c6a68b8b": "subscription pagesOnTodoChangesSubscription {\n  todos_TodoChanges {\n    todoID: id\n    text\n    isCompleted\n  }\n}\n",
+  "6dc98b91e0f73f84e44e58184ee19888": "mutation TodoListUpdateTodoMutation(\n  $todo: todos_TodoInput!\n) {\n  todos_updateTodo(todo: $todo) {\n    id\n    text\n    isCompleted\n  }\n}\n",
+  "a5cecd8875e6f3a3e5c3b863fcc36307": "query pagesAllTodosQuery {\n  todos_todos {\n    ...Todo_todo\n  }\n}\n\nfragment Todo_todo on todos_Todo {\n  id\n  text\n  isCompleted\n}\n",
+  "af225b2bbacefc886c76d7f5f8246f2a": "mutation TodoListUpdateTodoMutation(\n  $todo: todos_TodoInput!\n) {\n  todos_updateTodo(todo: $todo) {\n    todoId: id\n    text\n    isCompleted\n  }\n}\n",
+  "b3ff09b4512fd243f62645978b3386e4": "subscription pagesOnTodoChangesSubscription {\n  todos_TodoChanges {\n    id\n    text\n    isCompleted\n  }\n}\n",
+  "d69bdc4fc8c499251eaee6a38e7a3383": "query pagesAllTodosQuery {\n  todos_todos {\n    ...Todo_todo\n  }\n}\n\nfragment Todo_todo on todos_Todo {\n  todoID: id\n  text\n  isCompleted\n}\n",
+  "dd5333a71b886a8ea4a0024f1d20dc13": "subscription pages_onTodoChangesSubscription {\n  todos_TodoChanges {\n    id\n    text\n    isCompleted\n  }\n}\n",
+  "f1fd8268007d6d1ee65b16be25075648": "subscription pagesOnTodoChangesSubscription {\n  todos_TodoChanges {\n    ...Todo_todo\n  }\n}\n\nfragment Todo_todo on todos_Todo {\n  todoID: id\n  text\n  isCompleted\n}\n"
+}

examples/nextjs-relay-todos/.wundergraph/operations/users/get.ts

@@ -0,0 +1,14 @@
+import { createOperation, z } from '../../generated/wundergraph.factory';
+
+export default createOperation.query({
+	input: z.object({
+		id: z.string(),
+	}),
+	handler: async ({ input }) => {
+		return {
+			id: input.id,
+			name: 'Jens',
+			bio: 'Founder of WunderGraph',
+		};
+	},
+});

examples/nextjs-relay-todos/.wundergraph/operations/users/subscribe.ts

@@ -0,0 +1,26 @@
+import { createOperation, z } from '../../generated/wundergraph.factory';
+
+export default createOperation.subscription({
+	input: z.object({
+		id: z.string(),
+	}),
+	handler: async function* ({ input }) {
+		try {
+			// setup your subscription here, e.g. connect to a queue / stream
+			for (let i = 0; i < 10; i++) {
+				yield {
+					id: input.id,
+					name: 'Jens',
+					bio: 'Founder of WunderGraph',
+					time: new Date().toISOString(),
+				};
+				// let's fake some delay
+				await new Promise((resolve) => setTimeout(resolve, 1000));
+			}
+		} finally {
+			// finally gets called, when the client disconnects
+			// you can use it to clean up the queue / stream connection
+			console.log('client disconnected');
+		}
+	},
+});

examples/nextjs-relay-todos/.wundergraph/operations/users/update.ts

@@ -0,0 +1,14 @@
+import { createOperation, z } from '../../generated/wundergraph.factory';
+
+export default createOperation.mutation({
+	input: z.object({
+		id: z.string(),
+		name: z.string(),
+		bio: z.string(),
+	}),
+	handler: async ({ input }) => {
+		return {
+			...input,
+		};
+	},
+});

examples/nextjs-relay-todos/.wundergraph/wundergraph.config.ts

@@ -0,0 +1,67 @@
+import { configureWunderGraphApplication, cors, EnvironmentVariable, introspect, templates } from '@wundergraph/sdk';
+import server from './wundergraph.server';
+import operations from './wundergraph.operations';
+
+const todos = introspect.graphql({
+	apiNamespace: 'todos',
+	url: 'http://127.0.0.1:3000/api/graphql',
+	subscriptionsUseSSE: true,
+	loadSchemaFromString: /* GraphQL */ `
+		type Todo {
+			id: Int!
+			text: String!
+			isCompleted: Boolean!
+		}
+
+		input TodoInput {
+			id: Int!
+			text: String!
+			isCompleted: Boolean!
+		}
+
+		input NewTodoInput {
+			text: String!
+		}
+
+		type Query {
+			todos: [Todo]
+		}
+
+		type Mutation {
+			updateTodo(todo: TodoInput): Todo
+			addTodo(todo: NewTodoInput): Todo
+		}
+
+		type Subscription {
+			TodoChanges: Todo
+		}
+	`,
+});
+
+// configureWunderGraph emits the configuration
+configureWunderGraphApplication({
+	apis: [todos],
+	server,
+	operations,
+	codeGenerators: [
+		{
+			templates: [
+				// use all the typescript react templates to generate a client
+				...templates.typescript.all,
+			],
+		},
+	],
+	cors: {
+		...cors.allowAll,
+		allowedOrigins:
+			process.env.NODE_ENV === 'production'
+				? [
+						// change this before deploying to production to the actual domain where you're deploying your app
+						'http://localhost:3000',
+				  ]
+				: ['http://localhost:3000', new EnvironmentVariable('WG_ALLOWED_ORIGIN')],
+	},
+	security: {
+		enableGraphQLEndpoint: process.env.NODE_ENV !== 'production' || process.env.GITPOD_WORKSPACE_ID !== undefined,
+	},
+});

examples/nextjs-relay-todos/.wundergraph/wundergraph.operations.ts

@@ -0,0 +1,32 @@
+import { configureWunderGraphOperations } from '@wundergraph/sdk';
+import type { OperationsConfiguration } from './generated/wundergraph.operations';
+
+export default configureWunderGraphOperations<OperationsConfiguration>({
+	operations: {
+		defaultConfig: {
+			authentication: {
+				required: false,
+			},
+		},
+		queries: (config) => ({
+			...config,
+			caching: {
+				enable: false,
+				staleWhileRevalidate: 60,
+				maxAge: 60,
+				public: true,
+			},
+			liveQuery: {
+				enable: true,
+				pollingIntervalSeconds: 1,
+			},
+		}),
+		mutations: (config) => ({
+			...config,
+		}),
+		subscriptions: (config) => ({
+			...config,
+		}),
+		custom: {},
+	},
+});

examples/nextjs-relay-todos/.wundergraph/wundergraph.server.ts

@@ -0,0 +1,11 @@
+import { GraphQLObjectType, GraphQLSchema, GraphQLString } from 'graphql';
+import { configureWunderGraphServer } from '@wundergraph/sdk/server';
+import type { HooksConfig } from './generated/wundergraph.hooks';
+import type { InternalClient } from './generated/wundergraph.internal.client';
+
+export default configureWunderGraphServer<HooksConfig, InternalClient>(() => ({
+	hooks: {
+		queries: {},
+		mutations: {},
+	},
+}));

examples/nextjs-relay-todos/README.md

@@ -0,0 +1,24 @@
+# WunderGraph Relay Todo App
+
+The Todo App demonstrates how to use WunderGraph with Next.js & Relay.
+
+The app lets you create, read and update todos.
+
+## Getting Started
+
+Install the dependencies and run the complete example in one command:
+
+```shell
+npm install && npm start
+```
+
+After a while, a new browser tab will open,
+If no tab is open, navigate to [http://localhost:3000](http://localhost:3000).
+
+## Learn More
+
+Read the [Docs](https://docs.wundergraph.com/docs/getting-started/relay-quickstart) on how to use WunderGraph with Next.js & Relay.
+
+## Got Questions?
+
+Join us on [Discord](https://wundergraph.com/discord)!

examples/nextjs-relay-todos/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+	reactStrictMode: true,
+};
+
+module.exports = nextConfig;