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.

• 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

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.

• 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

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.

• 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

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.

• 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