Sourcing from Gentics Mesh
Gentics Mesh is an open-source self-hosted headless CMS that supports GraphQL. Contents like posts, products, images and more are represented by elements called “nodes”. These nodes can then be queried with the familiar GraphQL syntax.
The model of nodes can be defined within “schemas”. The demo data contains schemas for vehicles, images and categories.
In this guide you’ll create a complete project capable of querying data from a Gentics Mesh server.
The demo Gentics server that gets setup has a UI that can be accessed on
http://localhost:8080/mesh-ui/ with default login (username: admin, password: admin). It allows you to view the content stored on the CMS and add new content.
Now create a simple Gatsby site from the default Gatsby starter.
Navigate inside of the project with
Additionally, you need the
gatsby-source-graphql plugin. Because Gentics Mesh uses GraphQL, you will take advantage of Gatsby’s ability to stitch two GraphQL APIs together, reducing the time required to transform content. There is no need to use a special gatsby-source-x-cms plugin, the GraphQL source plugin is all you need.
Install the plugin:
The last step required before you can query your data is to configure the
gatsby-source-graphql plugin. Open
gatsby-config.js and add the following object to the plugins array.
This example uses the local Gentics Mesh Demo server that you have just started.
If everything works correctly, you should now have your Gentics Mesh API added to the Gatsby source API!
From the root of your project, run the development environment with
gatsby develop. Once the server has started, you should be able to open the following URL in your browser:
This will show you an interface where you can test your new content GraphQL API.
Try running this query:
Again, if everything is working properly, you should see a successful response in the shape of:
You can read more about how to use the GraphQL API in the Gentics Mesh docs.
For the purpose of this guide I’ve removed all the layout, SEO, link or other components in the Gatsby starter
index.js file. Open the index file located at
src/pages/index.js and replace the content with this code:
Once saved you can access the page via
You now have:
- Added the
StaticQuerycomponent to a page that allows you to fetch content from the GraphQL API.
- Fetched some vehicles from the demo data, namely the name and weight.
- Rendered the list in the StaticQuery’s RenderProp called “render”.
Hopefully you’ve seen how easy it is to start working with Gentics Mesh and Gatsby.
There is a lot more to learn on how Gentics Mesh API can help you build your site. One big advantage of Mesh is that you can use a tree structure for your contents. This allows for easy path generation of contents. Combined with Gatsby this allows you to quickly add different kinds of pages to your site. The template for each site can be selected by the schema (e.g. vehicle → vehiclePage, category → catgoryPage.)
This workflow is also explained hands-on in this in-depth guide which shows how to build a basic vehicle inventory with Gatsby.
Edit this page on GitHub