Integrating Gatsby with Sanity and querying with GROQ
6 replies
Last updated: Apr 25, 2020
F
🌝 Hi Sanity!I was into my new
Gatsby project when I discovered Sanity.
I started a Sanity project from
scratch, as I wanted to play around and understand everything in detail first, which I did, it is fun, making a few content modelling.Now, I would like to make the link between the Sanity studio and Gatsby, enabling
watchmode for instance and all the good stuff in the same philosophy of understanding what I am doing and how it actually works.I have tried the
example-company-website-gatsby-sanity-combo : it's working beautifully but there is plenty of unwanted things that comes with it and I already have a existing Gatsby project that is specific.Same thing for the or the
portofolio , the portfolio-preview-poc , the startup-starter-kit or the sanity-template-gatsby-blog that comes with everything set (Netlify): very nice but already orientated sets.I would like to have more information to understand the choices that I can possibly make in that setting (what they mean for the future of the project)
So I think that what I want (e.g. a step-by-step information on that setup between existing Gatsby and existing Sanity) will be around the
README of the gatsby-source-sanity .Am I wrong?
With just focusing on this plugin, am I missing anything of the cool features somewhere?
If so what are the possibilities?
Is this plugin the most efficient choice?
Regarding this plugin, it seems that everything comes around the GraphQL API, which is what brought me to Sanity originally.
But now I understand that Sanity has historically build around GROQ, so I would like to know if it is possible to query in GROQ from Gatsby and how with this plugin.
It seems that to query with GROQ you must deal not with this plugin
but with the javascript client described here .Is that it?
I think that GROQ is more efficient than GraphQL at build time: am I wrong?
Thanks in advance for your precious help
⭐
gatsby help groq
Gatsby project when I discovered Sanity.
I started a Sanity project from
scratch, as I wanted to play around and understand everything in detail first, which I did, it is fun, making a few content modelling.Now, I would like to make the link between the Sanity studio and Gatsby, enabling
watchmode for instance and all the good stuff in the same philosophy of understanding what I am doing and how it actually works.I have tried the
example-company-website-gatsby-sanity-combo : it's working beautifully but there is plenty of unwanted things that comes with it and I already have a existing Gatsby project that is specific.Same thing for the or the
portofolio , the portfolio-preview-poc , the startup-starter-kit or the sanity-template-gatsby-blog that comes with everything set (Netlify): very nice but already orientated sets.I would like to have more information to understand the choices that I can possibly make in that setting (what they mean for the future of the project)
So I think that what I want (e.g. a step-by-step information on that setup between existing Gatsby and existing Sanity) will be around the
README of the gatsby-source-sanity .Am I wrong?
With just focusing on this plugin, am I missing anything of the cool features somewhere?
If so what are the possibilities?
Is this plugin the most efficient choice?
Regarding this plugin, it seems that everything comes around the GraphQL API, which is what brought me to Sanity originally.
But now I understand that Sanity has historically build around GROQ, so I would like to know if it is possible to query in GROQ from Gatsby and how with this plugin.
It seems that to query with GROQ you must deal not with this plugin
but with the javascript client described here .Is that it?
I think that GROQ is more efficient than GraphQL at build time: am I wrong?
Thanks in advance for your precious help
⭐
gatsby help groq
Apr 25, 2020, 5:16 AM
K
So, if I understand correctly, you're looking for something like this? https://dev.to/doylecodes/making-new-projects-with-gatsby-sanity-30nh
Although you can use any data-fetching method you like inside of
With just focusing on this plugin, am I missing anything of the cool features somewhere?Nope, this plugin is pretty cool and the best way to integrate with Gatsby and Sanity. If you use it, you may also want to look at this: https://www.gatsbyjs.org/packages/gatsby-transform-portable-text/?=sanity
But now I understand that Sanity has historically build around GROQ, so I would like to know if it is possible to query in GROQ from Gatsby and how with this plugin.GROQ is the main query language which also power our GraphQL API. However, the plugin will only fetch the GraphQL schema definition from our API to prevent missing fields in Gatsby, and the export endpoint to stream all the documents in one go to Gatsby‘s in-memory datatore. From there Gatsby have an internal API.
Although you can use any data-fetching method you like inside of
gatsby-node.js(or even client-side if you like), we recommend using Gatsby‘s GraphQL API, since that will give you most of the features like real-time preview etc. Else you might want to look at Next.js, which is less opinionated.
I think that GROQ is more efficient than GraphQL at build time: am I wrong?Not in this case, since we use a pretty nifty method where we stream all your documents to Gatsby really fast.
Apr 25, 2020, 7:08 AM
K
So, if I understand correctly, you're looking for something like this? https://dev.to/doylecodes/making-new-projects-with-gatsby-sanity-30nh
Although you can use any data-fetching method you like inside of
With just focusing on this plugin, am I missing anything of the cool features somewhere?Nope, this plugin is pretty cool and the best way to integrate with Gatsby and Sanity. If you use it, you may also want to look at this: https://www.gatsbyjs.org/packages/gatsby-transform-portable-text/?=sanity
But now I understand that Sanity has historically build around GROQ, so I would like to know if it is possible to query in GROQ from Gatsby and how with this plugin.GROQ is the main query language which also power our GraphQL API. However, the plugin will only fetch the GraphQL schema definition from our API to prevent missing fields in Gatsby, and the export endpoint to stream all the documents in one go to Gatsby‘s in-memory datatore. From there Gatsby have an internal API.
Although you can use any data-fetching method you like inside of
gatsby-node.js(or even client-side if you like), we recommend using Gatsby‘s GraphQL API, since that will give you most of the features like real-time preview etc. Else you might want to look at Next.js, which is less opinionated.
I think that GROQ is more efficient than GraphQL at build time: am I wrong?Not in this case, since we use a pretty nifty method where we stream all your documents to Gatsby really fast.
Apr 25, 2020, 7:08 AM
F
Thanks
I knew the first article but not the second with portable text.
I will have a close look at it, because that is precisely what brought my attention to Sanity (your blog post taking distances with markdown, which touched something that I was not aware of but feeling without knowing it at the back of my head).
Ok so the
gatsby-source-sanity plugin and GraphQL are natural in this case otherwise it's more Next.js.I'll stay on Gatsby!
In the meantime, I have found also
this (I didn't know).To me, it is far too minimal because I am not able to get the detail of this
file .Where should it has to be put in `gatsby-config`for instance?
config is maid differently here with a
client-config.js file called from gatsby-config.js .
While I think there are doing roughly the same thing (but am I wrong?),
which of those config would you recommend?
(or where can I find a more detailed information?)
Also if I compare my actual existing folder structure in Gatsby and what I see in the
portfolio-preview-poc , or the startup-starter-kit , I can see lots of differences.Anything that you would recommend to change?
A reflection that I have on another point: as Sanity is focused on content modelling, wouldn't it be natural to propose thru a plugin a natural exposition to Google structured data schema for instance?
I am planning to implement a collection of Events json-ld structured data, but I feel a little bit like reinventing the wheel (on the top of localization)
I am talking of the Event schema but the same thing applies to Article, BreadcrumbList, Person, Organization, Webpage... etc... etc...
Does Sanity has an opinion on that?
user Y
!!I knew the first article but not the second with portable text.
I will have a close look at it, because that is precisely what brought my attention to Sanity (your blog post taking distances with markdown, which touched something that I was not aware of but feeling without knowing it at the back of my head).
Ok so the
gatsby-source-sanity plugin and GraphQL are natural in this case otherwise it's more Next.js.I'll stay on Gatsby!
In the meantime, I have found also
this (I didn't know).To me, it is far too minimal because I am not able to get the detail of this
file .Where should it has to be put in `gatsby-config`for instance?
config is maid differently here with a
client-config.js file called from gatsby-config.js .
While I think there are doing roughly the same thing (but am I wrong?),
which of those config would you recommend?
(or where can I find a more detailed information?)
Also if I compare my actual existing folder structure in Gatsby and what I see in the
portfolio-preview-poc , or the startup-starter-kit , I can see lots of differences.Anything that you would recommend to change?
A reflection that I have on another point: as Sanity is focused on content modelling, wouldn't it be natural to propose thru a plugin a natural exposition to Google structured data schema for instance?
I am planning to implement a collection of Events json-ld structured data, but I feel a little bit like reinventing the wheel (on the top of localization)
I am talking of the Event schema but the same thing applies to Article, BreadcrumbList, Person, Organization, Webpage... etc... etc...
Does Sanity has an opinion on that?
Apr 25, 2020, 7:39 AM
K
Some prefer to put the sanity config in its own file because they want to use the information several places, but it's perfectly OK to put it inside of
gatsby-config.jslike it's said in the README.md .
Apr 25, 2020, 7:44 AM
F
Sorry I modified my post in the meantime!?
Apr 25, 2020, 7:48 AM
F
I beg your pardon.
Apr 25, 2020, 7:51 AM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.