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
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
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
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