Gatsby Apollo Starter

Gatsby Apollo Starter is a free, MIT-licensed starter template for building Gatsby sites with Apollo Client, client-side routing, and styled-components, created by Smakosh (smakosh.com). It gives developers a preconfigured React + Gatsby project that wires Apollo Provider, ESLint, Prettier, and reusable Flex Grid components so they can focus on building features rather than tooling.

What is Gatsby Apollo Starter?

Gatsby Apollo Starter is a GitHub template that scaffolds a Gatsby project with Apollo Client already connected for GraphQL data fetching and client-side routing enabled. It takes as input a GraphQL API endpoint defined in the GATSBY_GRAPHQL_API environment variable and site data stored in src/data/index.js, and it produces a working Gatsby site that can be started with yarn start. The template runs on Gatsby (React + GraphQL) and is authored by Smakosh, with the repository hosted on GitHub and published under the MIT License.

Key Features

• Apollo Provider & client-side routing — Apollo is set up at the root so any component can run GraphQL queries, and the starter supports client-side routing without extra configuration.
• ESLint & Prettier configured — Code linting and formatting rules are preconfigured to keep code consistent and error-free.
• Flex Grid components — Reusable flexbox and grid layout components are included and designed to be easy to customize.
• Nice project structure — Source code is organized so site data, components, and pages live in clear locations, which helps with maintenance.
• Easy to customize — The site's data, styling, and components are centralized in a few files, so changing content or design is straightforward.
• Built with Gatsby, React, GraphQL, Apollo, and styled-components — The stack uses Gatsby as the static site generator, React for UI, GraphQL for data layer, Apollo for GraphQL client, and styled-components for styling (as indicated by repository topics).

Who is it for?

• Developers starting a Gatsby project with GraphQL: They can skip wiring Apollo Client and start querying immediately.
• Teams that use linting and formatting standards: The preconfigured ESLint and Prettier setup enforces consistent code style from day one.
• Freelancers and hobbyists building portfolio or blog sites: They can customize the data file and layout components to publish a personal site without building everything from scratch.

What can you do with it?

• GraphQL-driven websites: Point the GATSBY_GRAPHQL_API environment variable at a GraphQL endpoint and use Apollo to fetch data in React components.
• Personal portfolios: Edit src/data/index.js to add your own content, then reuse the Flex Grid components to lay out sections.
• Prototyping: Run yarn start to get a live development server with hot reloading, then iterate on pages and components.

How does it work?

After cloning the repository, create a .env.development file in the project root and set GATSBY_GRAPHQL_API to your GraphQL endpoint; for local production builds, create a .env.production file with the same variable. Then edit site data in src/data/index.js, install dependencies with yarn, and start the dev server with yarn start. Use yarn reset to clear the .cache/ and public/ folders if you need a clean build.

FAQ

What is Gatsby Apollo Starter?

Gatsby Apollo Starter is a boilerplate Gatsby project that comes with Apollo Client configured for GraphQL, client-side routing, ESLint, Prettier, and reusable Flex Grid components. It is free to use under the MIT License.

How do I configure the GraphQL API endpoint?

Create a .env.development file in the root directory and add GATSBY_GRAPHQL_API=your-api-url. If you are building locally for production, also create a .env.production file with the same variable.

What package manager does it require?

The prerequisites list Yarn. Install dependencies with yarn, start the dev server with yarn start, and reset the cache with yarn reset.

Is this template free?

Yes, the project is licensed under the MIT License, which allows free use, modification, and distribution.

Who maintains the project?

The repository is contributed to by Smakosh, and it supports Smakosh via Patreon, but the template itself is open source.