Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wpcodevo/nextjs-typegraphql-api
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.
https://github.com/wpcodevo/nextjs-typegraphql-api
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
Last synced: 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/wpcodevo/nextjs-typegraphql-api
- Owner: wpcodevo
- Created: 2022-06-22T18:39:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-16T17:55:18.000Z (almost 2 years ago)
- Last Synced: 2024-09-28T21:40:54.501Z (3 months ago)
- 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
- Language: TypeScript
- Homepage: https://codevoweb.com/nextjs-full-stack-app-with-react-query-and-graphql-codegen
- Size: 199 KB
- Stars: 27
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GraphQL API with Next.js & MongoDB
## 1. GraphQL API with Next.js & MongoDB: Access & Refresh Tokens
This 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.
### Topics Covered
- Initialize a Typescript Next.js Project
- Setup MongoDB and Redis Database Servers
- Setting up Environment Variables
- Connect the Redis and MongoDB Servers to Next.js
- Connect to the MongoDB Server
- Connect to the Redis Server
- Start the GraphQL Apollo Server
- Creating TypeGraphQL and Typegoose Schemas
- Creating the Typegoose Schema
- Creating the TypeGraphQL Schemas
- Creating an Error Handler
- Create Utility Functions to Generate and Verify JWTs
- How to Generate the Private and Public Keys
- Create an Authentication Guard
- Creating the Authentication Services
- Service to Register the User
- Service to Sign in the User
- Service to Get the Authenticated User
- Service to Refresh the Access Token
- Service to Logout the User
- Create the TypeGraphQL Resolvers
- Update the GraphQL Server
- Testing the GraphQL API in Postman
Read 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)
## 2. Next.js, GraphQL-CodeGen, & React Query: JWT Authentication
This 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.
### Topics Covered
- Next.js, React Query & GraphQL-CodeGen Overview
- Setup React Query & GraphQL CodeGen in Next.js
- Install and Setup React Query
- Install GraphQL and GraphQL-Request
- GraphQL-CodeGen Manual Setup
- Create the GraphQL Mutations and Queries
- Sign-up User Mutation
- Sign-in User Mutation
- Get Authenticated User Query
- Refresh Access Token Query
- Logout User Query
- Generating the Typescript Types & React Query Hooks
- Setup tailwindCss in Next.js
- Creating React Query, Axios & GraphQL Clients
- GraphQL Request Client
- Axios GraphQL Request Client
- State Management with Zustand
- Creating React Components with TailwindCSS
- Creating a Loading Spinner
- Creating the Header Component
- Creating a Full-Screen Loader
- Creating a Loading Button
- Creating an InputField Component with React-Hook-Form
- Creating a FileUpload with Cloudinary and React
- React Query & GraphQL Request: Sign-up User
- React Query & GraphQL Request: Login User
- React Query & GraphQL Request: Middleware Guard
- Creaeting the Profile and Home Pages
- Home Page
- Profile Page
- Update the App File
Read the entire article here: [https://codevoweb.com/nextjs-graphql-codegen-react-query-jwt-authentication](https://codevoweb.com/nextjs-graphql-codegen-react-query-jwt-authentication)
## 3. GraphQL CRUD API with Next.js, MongoDB, and TypeGraphQL
This 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.
### Topics Covered
- What is TypeGraphQL?
- Initialize a Typescript Next.js Project
- Setup MongoDB and Redis Databases
- Setting up Environment Variables
- Connecting to the Redis and MongoDB Databases
- Connect to the MongoDB Database
- Connect to the Redis Database
- Setup the GraphQL Apollo Server in Next.js
- Creating TypeGraphQL and Typegoose Schemas
- Creating the Typegoose Schema
- Creating the TypeGraphQL Schemas
- Create a Global Error Handler
- Creating the CRUD Services
- GraphQL Create Post Service
- GraphQL Get a Single Post Service
- GraphQL Update Post Service
- GraphQL Get all Posts Service
- GraphQL Delete Post Service
- Creating the CRUD TypeGraphQL Resolvers
- Update the Apollo GraphQL Server
- Testing the GraphQL CRUD API in Postman
Read the entire article here: [https://codevoweb.com/graphql-crud-api-nextjs-mongodb-typegraphql](https://codevoweb.com/graphql-crud-api-nextjs-mongodb-typegraphql)
## 4. Next.js Full-Stack App with React Query, and GraphQL-CodeGen
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.
### Topics Covered
- Next.js Full-Stack CRUD App Overview
- Benefits of React Query
- Setup GraphQL Code Generator
- Creating the GraphQL Mutations and Queries
- Create Post Mutation
- Update Post Mutation
- Delete Post Mutation
- Get a Single Post Query
- Get All Post Query
- Generating the React Query Hooks with CodeGen
- Create Reusable Components with tailwindCss
- Creating the Modal Component
- Creating the Message Component
- Creating a Custom Input Field with React-Hook-Form
- GraphQL Request and React Query Clients
- React Query & GraphQL Request Create Mutation
- React Query & GraphQL Request Update Mutation
- React Query & GraphQL Request Delete Mutation
- React Query & GraphQL Request Get Query
Read 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)