Skip to content

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.

Notifications You must be signed in to change notification settings

wpcodevo/nextjs-typegraphql-api

Repository files navigation

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.

GraphQL API with Next.js & MongoDB: Access & Refresh Tokens

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.

Next.js, GraphQL-CodeGen, & React Query: JWT Authentication

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.

GraphQL CRUD API with Next.js, MongoDB, and TypeGraphQL

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.

Next.js Full-Stack App with React Query, and GraphQL-CodeGen

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