Next Ts Graphql Apollo Starter

Overview:

Next GraphQL Apollo Starter is a starter kit designed to bootstrap Next.js applications with GraphQL support using Apollo and GraphQL code generator. It provides server-side rendering support and allows for easy integration of Apollo for fetching data from the server. The starter kit also comes with pre-configured plugins and libraries such as styled-components and styled system for styling and next.config.js for image and font imports.

Features:

• GraphQL Support: Next GraphQL Apollo Starter comes with Apollo@3 and provides an easy way to configure API endpoints using environment variables.
• Code Generation: The starter kit automatically generates hooks based on *.graphql files and provides support for importing other *.graphql files using comments.
• Apollo Server-side Integration: For fetching data with Apollo from the server-side, the starter kit provides functions for initializing and adding Apollo state to populate and restore the Apollo store.
• Configuration: The configuration files for the starter kit are located in the codegen.yaml file, which allows users to customize the code generation and introspection of the GraphQL schema.

Installation:

1. Copy and paste the .env.sample file to .env and update the NEXT_PUBLIC_GRAPHQL_API variable with your API endpoint.
2. Place your schema.graphql file at the root of your project.
3. Create *.graphql files in the ~/graphql/** directory for code generation.
4. Use the provided functions initializeApollo and addApolloState to fetch data with Apollo from the server-side.
5. Custom configurations can be made in the codegen.yaml file.

Summary:

Next GraphQL Apollo Starter is a powerful starter kit that combines the benefits of Next.js, Apollo, and GraphQL code generation. It simplifies the setup process for integrating GraphQL into Next.js applications and provides convenient features like automatic hook generation and server-side integration with Apollo. With pre-configured plugins for styling and webpack support for image and font imports, this starter kit offers a robust foundation for building Next.js applications with GraphQL.