Gatsby
Gatsby is a blazing-fast website framework for React. It allows developers to build React-based websites within minutes.
Strapi CMS
Strapi is an open-source, Node.js based, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks.
Integrate Gatsby with Strapi
Install gatsby-source-strapi package
npm i gatsby-source-strapi
gatsby-config.js file
- add the gatsby config file in the following code
plugins: [
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: "your strapi server",
contentTypes: ["restaurant"], //add your collections name
queryLimit: 1000,
}
}
]
Now connect your gatsby website and strapi CMS
- Here is an example of the GraphQL API query
import { StaticQuery, graphql } from 'gatsby';
const query = graphql`
query {
allStrapiRestaurant {
edges {
node {
strapiId
name
description
}
}
}
}
`
const IndexPage = () => (
<StaticQuery
query={query}
render={data => (
<ul>
{data.allStrapiRestaurant.edges.map(restaurant => (
<li key={restaurant.node.strapiId}>{restaurant.node.name}</li>
))}
</ul>
)}
/>
);
export default IndexPage;
Hope this helps.
