Menu
As I understand in Gatsby, a page query would be made at the parent level and would be passed down as props to the children components. And a <StatiQuery /> or the useStaticQuery hook when you are inside a component and want to obtain some data to pass into it. What is the best practice and when should I use one over another?
I'm guessing this comes down to React itself and if for example, we have components that need data at a deep level we would use Context and pass that down so you do not have to pass down props at deeper levels. Is it the same as this? Also if anyone has any patterns they use.
313
A static query is like taking a snapshot of your database at the time the query is created. Only the records selected when the query is first created will be included when the query is used in the program. Use static queries when doing global changes.
Using a special syntax, you describe the data you want in your component and then that data is given to you. Gatsby uses GraphQL to enable page and StaticQuery components to declare what data they and their sub-components need. Then, Gatsby makes that data available in the browser when needed by your components.
For pages, Gatsby is capable of handling queries with variables because of its awareness of page context. However, page queries can only be made in top-level page components. In contrast, static queries do not take variables. This is because static queries are used inside specific components, and can appear lower in the component tree.
Gatsby v2.1.0 introduces useStaticQuery, a new Gatsby feature that provides the ability to use a React Hook to query with GraphQL at build time. Just like the StaticQuery component, it allows your React components to retrieve data via a GraphQL query that will be parsed, evaluated, and injected into the component.
Gatsby handles three varieties of GraphQL queries: Page queries (sometimes for simplicity referred to as “normal queries”), static queries using the <StaticQuery /> component, and static queries using the useStaticQuery hook. Static queries differ from Gatsby page queries in a number of ways.
In contrast, static queries do not take variables. This is because static queries are used inside specific components, and can appear lower in the component tree. Data fetched with a static query won’t be dynamic (i.e. they can’t use variables, hence the name “static” query), but they can be called at any level in the component tree.
I usually decide where to put my data in Gatsby by answering this question. Let's assume we're making an ecommerce store:
Do I have to read/write the data often?
Yes (i.e. adding/updating cart items): use Context
No, but the data should be accessed across the whole site (i.e. list of products for the search bar): use sourceNodes, and get the data via useStaticQuery https://www.gatsbyjs.org/docs/node-apis/#sourceNodes
No, but the data should be rendered to a page (i.e. product page): use createPages and pageContext then pass the necessary data to the created page https://www.gatsbyjs.org/docs/node-apis/#createPages
I think the important thing here is, if you put your data source in gatsby-node, you don't expect it to update very often because you need to re-build whenever you need to update the data. Although, there can be workarounds like triggering a rebuild if you update the data.
I hope this helps!
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
