{"id":14976061,"url":"https://github.com/wpcodevo/nextjs-typegraphql-api","last_synced_at":"2025-10-27T18:30:18.917Z","repository":{"id":38614902,"uuid":"506365912","full_name":"wpcodevo/nextjs-typegraphql-api","owner":"wpcodevo","description":"This article will teach you how to build a full-stack CRUD App with Next.js, React Query, GraphQL Code Generator, React-Hook-Form, Zod, and graphql-request to perform Create/Update/Get/Delete operations.","archived":false,"fork":false,"pushed_at":"2023-03-16T17:55:18.000Z","size":204,"stargazers_count":27,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-08T11:11:10.884Z","etag":null,"topics":["apollo","apollo-server","apollographql","graphql","graphql-api","graphql-request","graphql-server","mongodb","mongoose","nextjs","nextjs-apolloserver","nextjs-graphql","nextjs-graphql-mongodb","nextjs-typescript","nodejs","react","react-query","typegoose"],"latest_commit_sha":null,"homepage":"https://codevoweb.com/nextjs-full-stack-app-with-react-query-and-graphql-codegen","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/wpcodevo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-22T18:39:14.000Z","updated_at":"2024-07-16T12:33:26.000Z","dependencies_parsed_at":"2025-02-14T11:16:25.698Z","dependency_job_id":null,"html_url":"https://github.com/wpcodevo/nextjs-typegraphql-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wpcodevo/nextjs-typegraphql-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpcodevo%2Fnextjs-typegraphql-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpcodevo%2Fnextjs-typegraphql-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpcodevo%2Fnextjs-typegraphql-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpcodevo%2Fnextjs-typegraphql-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wpcodevo","download_url":"https://codeload.github.com/wpcodevo/nextjs-typegraphql-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpcodevo%2Fnextjs-typegraphql-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281319619,"owners_count":26481035,"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","status":"online","status_checked_at":"2025-10-27T02:00:05.855Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["apollo","apollo-server","apollographql","graphql","graphql-api","graphql-request","graphql-server","mongodb","mongoose","nextjs","nextjs-apolloserver","nextjs-graphql","nextjs-graphql-mongodb","nextjs-typescript","nodejs","react","react-query","typegoose"],"created_at":"2024-09-24T13:53:14.340Z","updated_at":"2025-10-27T18:30:18.527Z","avatar_url":"https://github.com/wpcodevo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GraphQL API with Next.js \u0026 MongoDB\n\n## 1. GraphQL API with Next.js \u0026 MongoDB: Access \u0026 Refresh Tokens\n\nThis article will teach you how to build a GraphQL API with Next.js to implement JWT Authentication using apollo-server-micro, TypeGraphQL, MongoDB, Redis, Mongoose, and Typegoose.\n\n![GraphQL API with Next.js \u0026 MongoDB: Access \u0026 Refresh Tokens](https://codevoweb.com/wp-content/uploads/2022/06/GraphQL-API-with-Next.js-MongoDB-Access-Refresh-Tokens.webp)\n\n### Topics Covered\n\n- Initialize a Typescript Next.js Project\n- Setup MongoDB and Redis Database Servers\n- Setting up Environment Variables\n- Connect the Redis and MongoDB Servers to Next.js\n    - Connect to the MongoDB Server\n    - Connect to the Redis Server\n- Start the GraphQL Apollo Server\n- Creating TypeGraphQL and Typegoose Schemas\n    - Creating the Typegoose Schema\n    - Creating the TypeGraphQL Schemas\n- Creating an Error Handler\n- Create Utility Functions to Generate and Verify JWTs\n    - How to Generate the Private and Public Keys\n- Create an Authentication Guard\n- Creating the Authentication Services\n    - Service to Register the User\n    - Service to Sign in the User\n    - Service to Get the Authenticated User\n    - Service to Refresh the Access Token\n    - Service to Logout the User\n- Create the TypeGraphQL Resolvers\n- Update the GraphQL Server\n- Testing the GraphQL API in Postman\n\nRead the entire article here: [https://codevoweb.com/graphql-api-next-mongodb-access-and-refresh-tokens](https://codevoweb.com/graphql-api-next-mongodb-access-and-refresh-tokens)\n\n## 2. Next.js, GraphQL-CodeGen, \u0026 React Query: JWT Authentication\n\nThis article will teach you how to add access and refresh token functionalities to your Next.js app using React Query, graphql-request, GraphQL CodeGen, React-Hook-Form,  and Zod.\n\n![Next.js, GraphQL-CodeGen, \u0026 React Query: JWT Authentication](https://codevoweb.com/wp-content/uploads/2022/07/Next.js-GraphQL-CodeGen-React-Query-JWT-Authentication.webp)\n\n### Topics Covered\n\n- Next.js, React Query \u0026 GraphQL-CodeGen Overview\n- Setup React Query \u0026 GraphQL CodeGen in Next.js\n    - Install and Setup React Query\n    - Install GraphQL and GraphQL-Request\n    - GraphQL-CodeGen Manual Setup\n- Create the GraphQL Mutations and Queries\n    - Sign-up User Mutation\n    - Sign-in User Mutation\n    - Get Authenticated User Query\n    - Refresh Access Token Query\n    - Logout User Query\n- Generating the Typescript Types \u0026 React Query Hooks\n- Setup tailwindCss in Next.js\n- Creating React Query, Axios \u0026 GraphQL Clients\n    - GraphQL Request Client\n    - Axios GraphQL Request Client\n- State Management with Zustand\n- Creating React Components with TailwindCSS\n    - Creating a Loading Spinner\n    - Creating the Header Component\n    - Creating a Full-Screen Loader\n    - Creating a Loading Button\n    - Creating an InputField Component with React-Hook-Form\n    - Creating a FileUpload with Cloudinary and React\n- React Query \u0026 GraphQL Request: Sign-up User\n- React Query \u0026 GraphQL Request: Login User\n- React Query \u0026 GraphQL Request: Middleware Guard\n- Creaeting the Profile and Home Pages\n    - Home Page\n    - Profile Page\n- Update the App File\n\nRead the entire article here: [https://codevoweb.com/nextjs-graphql-codegen-react-query-jwt-authentication](https://codevoweb.com/nextjs-graphql-codegen-react-query-jwt-authentication)\n\n## 3. GraphQL CRUD API with Next.js, MongoDB, and TypeGraphQL\n\nThis article will teach you how to build a GraphQL API with Next.js to implement the basic CRUD operations using apollo-server-micro, TypeGraphQL, MongoDB, Redis, Mongoose, and Typegoose.\n\n![GraphQL CRUD API with Next.js, MongoDB, and TypeGraphQL](https://codevoweb.com/wp-content/uploads/2022/06/GraphQL-CRUD-API-with-Next.js-MongoDB-and-TypeGraphQL.webp)\n\n### Topics Covered\n\n- What is TypeGraphQL?\n- Initialize a Typescript Next.js Project\n- Setup MongoDB and Redis Databases\n- Setting up Environment Variables\n- Connecting to the Redis and MongoDB Databases\n    - Connect to the MongoDB Database\n    - Connect to the Redis Database\n- Setup the GraphQL Apollo Server in Next.js\n- Creating TypeGraphQL and Typegoose Schemas\n    - Creating the Typegoose Schema\n    - Creating the TypeGraphQL Schemas\n- Create a Global Error Handler\n- Creating the CRUD Services\n    - GraphQL Create Post Service\n    - GraphQL Get a Single Post Service\n    - GraphQL Update Post Service\n    - GraphQL Get all Posts Service\n    - GraphQL Delete Post Service\n- Creating the CRUD TypeGraphQL Resolvers\n- Update the Apollo GraphQL Server\n- Testing the GraphQL CRUD API in Postman\n\nRead the entire article here: [https://codevoweb.com/graphql-crud-api-nextjs-mongodb-typegraphql](https://codevoweb.com/graphql-crud-api-nextjs-mongodb-typegraphql)\n\n## 4. Next.js Full-Stack App with React Query, and GraphQL-CodeGen\n\nThis article will teach you how to build a full-stack CRUD App with Next.js, React Query, GraphQL Code Generator, React-Hook-Form, Zod, and graphql-request to perform Create/Update/Get/Delete operations.\n\n![Next.js Full-Stack App with React Query, and GraphQL-CodeGen](https://codevoweb.com/wp-content/uploads/2022/07/Next.js-Full-Stack-App-with-React-Query-and-GraphQL-CodeGen.webp)\n\n### Topics Covered\n\n- Next.js Full-Stack CRUD App Overview\n- Benefits of React Query\n- Setup GraphQL Code Generator\n- Creating the GraphQL Mutations and Queries\n    - Create Post Mutation\n    - Update Post Mutation\n    - Delete Post Mutation\n    - Get a Single Post Query\n    - Get All Post Query\n- Generating the React Query Hooks with CodeGen\n- Create Reusable Components with tailwindCss\n    - Creating the Modal Component\n    - Creating the Message Component\n    - Creating a Custom Input Field with React-Hook-Form\n- GraphQL Request and React Query Clients\n- React Query \u0026 GraphQL Request Create Mutation\n- React Query \u0026 GraphQL Request Update Mutation\n- React Query \u0026 GraphQL Request Delete Mutation\n- React Query \u0026 GraphQL Request Get Query\n\nRead the entire article here: [https://codevoweb.com/nextjs-full-stack-app-with-react-query-and-graphql-codegen](https://codevoweb.com/nextjs-full-stack-app-with-react-query-and-graphql-codegen)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpcodevo%2Fnextjs-typegraphql-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwpcodevo%2Fnextjs-typegraphql-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpcodevo%2Fnextjs-typegraphql-api/lists"}