Connecting Sanity with Gatsby and querying data in GraphQL.

34 replies
Last updated: May 21, 2021
Hi everyone, can anyone help me with connecting Sanity <-> Gatsby ? I have the gatsby-source-sanity plugin installed and configured but the schema is not showing up in

http://localhost:8000/___graphql
AI Update

I've been there! When your Sanity schema isn't showing up in Gatsby's GraphiQL explorer at http://localhost:8000/___graphql, here are the most common issues to check:

1. Verify your gatsby-config.js setup

Make sure your gatsby-source-sanity configuration has the correct project details:

{
  resolve: 'gatsby-source-sanity',
  options: {
    projectId: 'your-project-id',
    dataset: 'your-dataset',
    // Add a token if you have a private dataset
    token: process.env.SANITY_TOKEN,
    watchMode: true, // enables hot-reloading in development
    overlayDrafts: true, // if you want to preview drafts
  }
}

Double-check that your projectId and dataset name are correct. You can find these in your Sanity project settings.

2. Clear Gatsby cache and restart

Schema changes often require clearing Gatsby's cache to be picked up:

gatsby clean
gatsby develop

The gatsby clean command removes the .cache and public directories, forcing Gatsby to rebuild everything from scratch.

3. Check for published content in Sanity

Make sure you actually have published documents in your Sanity dataset. If your dataset is empty or all documents are drafts (and you haven't configured overlayDrafts), there won't be any types to show in GraphiQL. The gatsby-source-sanity plugin fetches your content from Sanity's export endpoint, so you need actual documents to create the schema.

4. Private dataset authentication

If you're using a private dataset, you must add a read-permission token to your configuration. Generate one in your Sanity project settings under API settings, then add it to your config:

token: process.env.SANITY_TOKEN

Without this token, the plugin won't be able to access your content.

5. Optional: Deploy GraphQL API for schema validation

While not required for the plugin to work, you can optionally deploy a GraphQL API to help with schema validation. From your Sanity studio folder, run:

sanity graphql deploy

If you deploy a GraphQL API, the plugin will fetch the schema definition to ensure all your types and fields are present, but the plugin works perfectly fine without this step by fetching data directly from Sanity's export endpoint.

6. Check for configuration errors

Look at your terminal where gatsby develop is running. The plugin will log any connection issues or authentication errors there. Common problems include typos in the project ID or dataset name.

Once you've gone through these steps, your Sanity types should appear in GraphiQL as allSanityPost, sanityPost, etc. The gatsby-source-sanity plugin is quite efficientβ€”it only makes two API requests during the entire build process regardless of how many GraphQL queries you have!

Hi
user U
πŸ‘‹ Have you deployed your GraphQL API? To do so, you can run
sanity graphql deploy
from the studio folder. Please let me know if you run into any trouble doing so πŸ™‚
I have done that
Once that is done
I should be able to see my data in


http://localhost:8000/___graphql correct ?
In gatsby
Indeed, it should show up afterwards. You may have to restart the development server and run
gatsby clean
to make sure there's no cache getting in the way.
Also, if your dataset is private, make sure you have added a token with read rights to your source plugin configuration.
That helped !
So any time schema changes , I need to re run studio ?
re-deploy?
That's correct: every time you update your schema (not the content), you'll have to re-deploy the GraphQL API for the changes to be reflected on the Gatsby side as well.
Thanks a lot Peter.
GraphQL/gatsby/Sanity is new to me.
πŸ™‚
It's quite a lot to get your head around at the beginning, but that's why we're here for any questions πŸ™‚ Looking forward to seeing what you'll build!
It's quite a lot to get your head around at the beginning, but that's why we're here for any questions πŸ™‚ Looking forward to seeing what you'll build!
Just one more questions, how can I query ALL data from a schema ?
I am so used to SQL
Select * from.. lol
I am doing
query MyQuery {
sanityTestimonial {
id
}
}
It's bringing up only the first one?
You could try querying
allSanityTestimonial
instead to get all of them.
Admittedly, this is easier using Sanity's own open-source query language (GROQ), but people tend to still use GraphQL with Gatsby. In GROQ, you could get
all data with
*
, or a specific document type's data with
*[_type == "testimonial"]
. Just sharing this for context, although it won't be relevant for your project at this point: https://www.sanity.io/docs/what-about-graphql πŸ™‚
How's GROQ used in a gatsby environment ?
It's generally not used with Gatsby, as GraphQL is the default there. If you're getting started, you may want to stick to GraphQL as it'll be easier to find specific answers for Gatsby.
However, if you're feeling adventurous, here's a plugin to use GROQ with Gatsby:
https://github.com/kmcaloon/gatsby-plugin-groq
That's awesome Peter, thanks for the help.I'll continue using gatsby-source-sanity for now
Sounds great (and makes sense) πŸ™‚
One last question, I have 3 items, on sanity GROQ the result is 3 but on graphQL endpoint I am getting only 2 ? Despite using no filters
Otherwise I am getting the hang on it so far
Any chance you are querying from inside the studio or from the CLI with GROQ? If so, you might be getting both the draft and the published version of the same document in one case. You can identify the draft by its ID on a so-called non-root path (a path with a
.
) - the
_id
will be formatted like
drafts.<id>
in that case.
Unless you are querying with a read token in Gatsby, you may not see drafts there.
Only documents on the root path (so without any dots) are public by default.
The all 3 are published
Actually are 3 are published
I am calling them here:
http://localhost:8000/___graphql
Could you share the _id and _type of the three documents you're seeing in the studio?
"840d935c-aa5d-42de-9129-660e73b87ef9"
"c2a5fa5b-991c-45e4-b58d-cdec11b7c402"

"f7c68f37-7c60-4852-a40c-4f557ef953a3"
"testimonial" _type
Considering they are published and of the same type, they should indeed show up in GraphiQL as well. Could you try another restart with
gatsby clean
? This shouldn't be necessarily normally but it's to rule out some issues.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?