{"id":17241266,"url":"https://github.com/sinoon/graphql-nextjs","last_synced_at":"2025-07-26T03:06:00.493Z","repository":{"id":44330020,"uuid":"512077712","full_name":"sinoon/graphql-nextjs","owner":"sinoon","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-09T02:50:45.000Z","size":72,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T01:01:37.332Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sinoon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-09T02:50:33.000Z","updated_at":"2022-07-09T02:50:48.000Z","dependencies_parsed_at":"2022-08-30T05:41:39.953Z","dependency_job_id":null,"html_url":"https://github.com/sinoon/graphql-nextjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinoon%2Fgraphql-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinoon%2Fgraphql-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinoon%2Fgraphql-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sinoon%2Fgraphql-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sinoon","download_url":"https://codeload.github.com/sinoon/graphql-nextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245579675,"owners_count":20638679,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T06:08:32.319Z","updated_at":"2025-03-26T03:13:44.580Z","avatar_url":"https://github.com/sinoon.png","language":"TypeScript","readme":"# Fullstack Example with Next.js (GraphQL API)\n\nThis example shows how to implement a **fullstack app in TypeScript with [Next.js](https://nextjs.org/)** using [React](https://reactjs.org/), [Apollo Client](https://www.apollographql.com/docs/react/) (frontend), [Nexus Schema](https://nxs.li/components/standalone/schema) and [Prisma Client](https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client) (backend). It uses a SQLite database file with some initial dummy data which you can find at [`./prisma/dev.db`](./prisma/dev.db).\n\n## Getting started\n\n### 1. Download example and install dependencies\n\nDownload this example:\n\n```\ncurl https://codeload.github.com/prisma/prisma-examples/tar.gz/latest | tar -xz --strip=2 prisma-examples-latest/typescript/graphql-nextjs\n```\n\nInstall npm dependencies:\n\n```\ncd graphql-nextjs\nnpm install\n```\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eAlternative:\u003c/strong\u003e Clone the entire repo\u003c/summary\u003e\n\nClone this repository:\n\n```\ngit clone git@github.com:prisma/prisma-examples.git --depth=1\n```\n\nInstall npm dependencies:\n\n```\ncd prisma-examples/typescript/graphql-nextjs\nnpm install\n```\n\n\u003c/details\u003e\n\n### 2. Create and seed the database\n\nRun the following command to create your SQLite database file. This also creates the `User` and `Post` tables that are defined in [`prisma/schema.prisma`](./prisma/schema.prisma):\n\n```\nnpx prisma migrate dev --name init\n```\n\nWhen `npx prisma migrate dev` is executed against a newly created database, seeding is also triggered. The seed file in [`prisma/seed.ts`](./prisma/seed.ts) will be executed and your database will be populated with the sample data.\n\n\n### 2. Start the app\n\n```\nnpm run dev\n```\n\nThe app is now running, navigate to [`http://localhost:3000/`](http://localhost:3000/) in your browser to explore its UI.\n\n\u003cdetails\u003e\u003csummary\u003eExpand for a tour through the UI of the app\u003c/summary\u003e\n\n\u003cbr /\u003e\n\n**Blog** (located in [`./pages/index.tsx`](./pages/index.tsx))\n\n![](https://imgur.com/eepbOUO.png)\n\n**Signup** (located in [`./pages/signup.tsx`](./pages/signup.tsx))\n\n![](https://imgur.com/iE6OaBI.png)\n\n**Create post (draft)** (located in [`./pages/create.tsx`](./pages/create.tsx))\n\n![](https://imgur.com/olCWRNv.png)\n\n**Drafts** (located in [`./pages/drafts.tsx`](./pages/drafts.tsx))\n\n![](https://imgur.com/PSMzhcd.png)\n\n**View post** (located in [`./pages/p/[id].tsx`](./pages/p/[id].tsx)) (delete or publish here)\n\n![](https://imgur.com/zS1B11O.png)\n\n\u003c/details\u003e\n\n## Using the GraphQL API\n\nYou can also access the GraphQL API of the API server directly. It is running on the same host machine and port and can be accessed via the `/api` route (in this case that is [`localhost:3000/api`](http://localhost:3000/api)).\n\nBelow are a number of operations that you can send to the API.\n\n### Retrieve all published posts and their authors\n\n```graphql\nquery {\n  feed {\n    id\n    title\n    content\n    published\n    author {\n      id\n      name\n      email\n    }\n  }\n}\n```\n\n\u003cDetails\u003e\u003cSummary\u003e\u003cstrong\u003eSee more API operations\u003c/strong\u003e\u003c/Summary\u003e\n\n### Create a new user\n\n```graphql\nmutation {\n  signupUser(name: \"Sarah\", email: \"sarah@prisma.io\") {\n    id\n  }\n}\n```\n\n### Create a new draft\n\n```graphql\nmutation {\n  createDraft(\n    title: \"Join the Prisma Slack\"\n    content: \"https://slack.prisma.io\"\n    authorEmail: \"alice@prisma.io\"\n  ) {\n    id\n    published\n  }\n}\n```\n\n### Publish an existing draft\n\n```graphql\nmutation {\n  publish(postId: \"__POST_ID__\") {\n    id\n    published\n  }\n}\n```\n\n\u003e **Note**: You need to replace the `__POST_ID__`-placeholder with an actual `id` from a `Post` item. You can find one e.g. using the `filterPosts`-query.\n\n### Search for posts with a specific title or content\n\n```graphql\n{\n  filterPosts(searchString: \"graphql\") {\n    id\n    title\n    content\n    published\n    author {\n      id\n      name\n      email\n    }\n  }\n}\n```\n\n### Retrieve a single post\n\n```graphql\n{\n  post(postId: \"__POST_ID__\") {\n    id\n    title\n    content\n    published\n    author {\n      id\n      name\n      email\n    }\n  }\n}\n```\n\n\u003e **Note**: You need to replace the `__POST_ID__`-placeholder with an actual `id` from a `Post` item. You can find one e.g. using the `filterPosts`-query.\n\n### Delete a post\n\n```graphql\nmutation {\n  deletePost(postId: \"__POST_ID__\") {\n    id\n  }\n}\n```\n\n\u003e **Note**: You need to replace the `__POST_ID__`-placeholder with an actual `id` from a `Post` item. You can find one e.g. using the `filterPosts`-query.\n\n\u003c/Details\u003e\n\n\n## Evolving the app\n\nEvolving the application typically requires three steps:\n\n1. Migrate your database using Prisma Migrate\n1. Update your server-side application code\n1. Build new UI features in React\n\nFor the following example scenario, assume you want to add a \"profile\" feature to the app where users can create a profile and write a short bio about themselves.\n\n### 1. Migrate your database using Prisma Migrate\n\nThe first step is to add a new table, e.g. called `Profile`, to the database. You can do this by adding a new model to your [Prisma schema file](./prisma/schema.prisma) file and then running a migration afterwards:\n\n```diff\n// ./prisma/schema.prisma\n\nmodel User {\n  id      Int      @default(autoincrement()) @id\n  name    String?\n  email   String   @unique\n  posts   Post[]\n+ profile Profile?\n}\n\nmodel Post {\n  id        Int      @id @default(autoincrement())\n  title     String\n  content   String?\n  published Boolean  @default(false)\n  author    User?    @relation(fields: [authorId], references: [id])\n  authorId  Int?\n}\n\n+model Profile {\n+  id     Int     @default(autoincrement()) @id\n+  bio    String?\n+  user   User    @relation(fields: [userId], references: [id])\n+  userId Int     @unique\n+}\n```\n\nOnce you've updated your data model, you can execute the changes against your database with the following command:\n\n```\nnpx prisma migrate dev --name add-profile\n```\n\nThis adds another migration to the `prisma/migrations` directory and creates the new `Profile` table in the database.\n\n### 2. Update your application code\n\nYou can now use your `PrismaClient` instance to perform operations against the new `Profile` table. Those operations can be used to implement queries and mutations in the GraphQL API.\n\n#### 2.1. Add the `Profile` type to your GraphQL schema\n\nFirst, add a new GraphQL type via Nexus' `objectType` function:\n\n```diff\n// ./pages/api/index.ts\n\n+const Profile = objectType({\n+  name: 'Profile',\n+  definition(t) {\n+    t.nonNull.int('id')\n+    t.string('bio')\n+    t.field('user', {\n+      type: 'User',\n+      resolve: (parent) =\u003e {\n+        return prisma.profile\n+          .findUnique({\n+            where: { id: parent.id || undefined },\n+          })\n+          .user()\n+      },\n+    })\n+  },\n+})\n\nconst User = objectType({\n  name: 'User',\n  definition(t) {\n    t.nonNull.int('id')\n    t.string('name')\n    t.nonNull.string('email')\n    t.nonNull.list.nonNull.field('posts', {\n      type: 'Post',\n      resolve: (parent) =\u003e {\n        return prisma.user\n          .findUnique({\n            where: { id: parent.id || undefined },\n          })\n          .posts()\n      },\n    })\n+   t.field('profile', {\n+     type: 'Profile',\n+     resolve: (parent) =\u003e {\n+       return prisma.user.findUnique({\n+         where: { id: parent.id }\n+       }).profile()\n+     }\n+   })\n  },\n})\n```\n\nDon't forget to include the new type in the `types` array that's passed to `makeSchema`:\n\n```diff\nexport const schema = makeSchema({\n  types: [\n    Query,\n    Mutation,\n    Post,\n    User,\n+   Profile,\n    GQLDate\n  ],\n  // ... as before\n}\n```\n\nNote that in order to resolve any type errors, your development server needs to be running so that the Nexus types can be generated. If it's not running, you can start it with `npm run dev`.\n\n#### 2.2. Add a `createProfile` GraphQL mutation\n\n```diff\n// ./pages/api/index.ts\n\nconst Mutation = objectType({\n  name: 'Mutation',\n  definition(t) {\n\n    // other mutations\n\n+   t.field('addProfileForUser', {\n+     type: 'Profile',\n+     args: {\n+       email: stringArg(),\n+       bio: stringArg()\n+     }, \n+     resolve: async (_, args) =\u003e {\n+       return prisma.profile.create({\n+         data: {\n+           bio: args.bio,\n+           user: {\n+             connect: {\n+               email: args.email || undefined,\n+             }\n+           }\n+         }\n+       })\n+     }\n+   })\n\n  }\n})\n```\n\nFinally, you can test the new mutation like this:\n\n```graphql\nmutation {\n  addProfileForUser(\n    email: \"mahmoud@prisma.io\"\n    bio: \"I like turtles\"\n  ) {\n    id\n    bio\n    user {\n      id\n      name\n    }\n  }\n}\n```\n\n\u003cdetails\u003e\u003csummary\u003eExpand to view more sample Prisma Client queries on \u003ccode\u003eProfile\u003c/code\u003e\u003c/summary\u003e\n\nHere are some more sample Prisma Client queries on the new \u003ccode\u003eProfile\u003c/code\u003e model:\n\n##### Create a new profile for an existing user\n\n```ts\nconst profile = await prisma.profile.create({\n  data: {\n    bio: 'Hello World',\n    user: {\n      connect: { email: 'alice@prisma.io' },\n    },\n  },\n})\n```\n\n##### Create a new user with a new profile\n\n```ts\nconst user = await prisma.user.create({\n  data: {\n    email: 'john@prisma.io',\n    name: 'John',\n    profile: {\n      create: {\n        bio: 'Hello World',\n      },\n    },\n  },\n})\n```\n\n##### Update the profile of an existing user\n\n```ts\nconst userWithUpdatedProfile = await prisma.user.update({\n  where: { email: 'alice@prisma.io' },\n  data: {\n    profile: {\n      update: {\n        bio: 'Hello Friends',\n      },\n    },\n  },\n})\n```\n\n\u003c/details\u003e\n\n### 3. Build new UI features in React\n\nOnce you have added a new query or mutation to the API, you can start building a new UI component in React. It could e.g. be called `profile.tsx` and would be located in the `pages` directory.\n\nIn the application code, you can access the new operations via Apollo Client and populate the UI with the data you receive from the API calls.\n\n## Next steps\n\n- Check out the [Prisma docs](https://www.prisma.io/docs)\n- Share your feedback in the [`prisma2`](https://prisma.slack.com/messages/CKQTGR6T0/) channel on the [Prisma Slack](https://slack.prisma.io/)\n- Create issues and ask questions on [GitHub](https://github.com/prisma/prisma/)\n- Watch our biweekly \"What's new in Prisma\" livestreams on [Youtube](https://www.youtube.com/channel/UCptAHlN1gdwD89tFM3ENb6w)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinoon%2Fgraphql-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsinoon%2Fgraphql-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinoon%2Fgraphql-nextjs/lists"}