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-netlifycreates 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.jsshows a real query usinguseQueryfrom@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 devserves 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, andnetlify deployhandle 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 devto 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.
