Gatsby Starter Apollo Netlify

Gatsby Starter Apollo Netlify is a boilerplate for building fullstack GraphQL applications that combines a Gatsby/React frontend with an Apollo Server exposed as a Netlify Function.

What is Gatsby Starter Apollo Netlify?

Gatsby Starter Apollo Netlify is a GitHub-hosted starter project published under the piducancore repository. It scaffolds a fullstack GraphQL app: the frontend is a default Gatsby site, and the backend is an Apollo Server running inside a Netlify Function located at functions/graphql/graphql.js. When you create a project with this starter, you get a working example that queries the local GraphQL endpoint using the useQuery hook from @apollo/client on the homepage. It runs locally through Netlify Dev, which proxies both the Gatsby site and the serverless function on a single port.

Key Features

• One-command project creation — gatsby new my-new-project piducancore/gatsby-starter-apollo-netlify creates a new project with all starter files.
• Fullstack GraphQL built-in — The Apollo Server function is pre-configured as the GraphQL endpoint at /.netlify/functions/graphql.
• Example client query — src/pages/index.js shows a real query using useQuery from @apollo/client, ready to adapt.
• GraphQL Playground — In local development, the Apollo Server playground is available at http://localhost:8888/.netlify/functions/graphql.
• Netlify Dev proxying — Running netlify dev serves both the frontend and functions on port 8888; note that Gatsby's default port 8000 cannot access the functions.
• CLI deployment — netlify login, netlify init, and netlify deploy handle deployment to Netlify from the command line.

Who is it for?

• GraphQL developers who want a minimal, working fullstack example without configuring a separate API server.
• Gatsby users who need a GraphQL backend and want to keep everything on Netlify's serverless platform.
• Jamstack learners who want to see how to connect a Gatsby frontend to a custom GraphQL API through Netlify Functions.

What can you do with it?

• Prototype a fullstack GraphQL app — Use the included example query and function as the starting point, then extend resolvers in functions/graphql/graphql.js.
• Deploy a serverless GraphQL API — Host your Apollo Server as a Netlify Function without provisioning a dedicated server.
• Run a local fullstack environment — Use netlify dev to test the entire stack on one port with hot-reloading.

How does it work?

The README's usage flow is: create the project with gatsby new, navigate into the directory, and run netlify dev. The starter includes a serverless function that initializes Apollo Server, and a React page that queries it. For production, you deploy by logging in with netlify login, initializing a site with netlify init, and pushing updates with netlify deploy.

FAQ

Do I need a Netlify account?

Yes, a Netlify account and the latest Netlify CLI installed globally are required to run the project with netlify dev and to deploy it.

Where do I write my GraphQL resolvers?

Edit functions/graphql/graphql.js to add types, resolvers, and data sources for your Apollo Server.

Why is my GraphQL API not available at localhost:8000?

Port 8000 is Gatsby's default dev server and does not proxy serverless functions. Use the Netlify Dev URL at localhost:8888 instead.

How do I deploy this starter?

Run netlify login, then netlify init to configure a new or existing site, and netlify deploy to create a new deployment.