In this example repo, you get the bare bones Astro starter pack, coupled with a simple GraphQL implementation using GraphQL Yoga and Apollo Client.
Astro is set to SSR mode to enable its API endpoint abilities, necessary to handle incoming GraphQL requests.
For a full walkthrough and tutorial on this project, check out this blog post on my website.
Inside of your Astro project, you'll see the following folders and files:
/
โโโ public/
โโโ src/
โ โโโ components/
โ โโโ CartRow.astro
โ โโโ data/
โ โโโ cart.ts
โ โโโ types.ts
โ โโโ lib/
โ โโโ apollo-client.ts
โ โโโ styles/
โ โโโ main.css
โ โโโ pages/
โ โโโ index.astro
โ โโโ api/
โ โโโ graphql.ts
โโโ package.json
Astro looks for .astro
or .md
files in the src/pages/
directory. Each page is exposed as a route based on its file name. This project just has the one page, a homepage, located at /pages/index.astro
.
There's nothing special about src/components/
, but that's where you can put any Astro/React/Vue/Svelte/Preact components.
The src/data
directory holds some types and dummy data we can use with GraphQL.
In src/lib
there's a really simple implemenation of Apollo Client, used to physically call our GraphQL endpoint.
With the /src/pages/api/graphql.ts
file, this is where the GraphQL action happens. It uses GraphQL Yoga to create a schema, and defines a POST
endpoint to handle incoming API requests.