You're reading "Integrate DatoCMS with React"

A blog with various GraphQL flavours

With the following demos we'll set up a simplistic recipe's blog:

Blog screenshot

You can see it live here. The UI is exactly the same for all the projects linked here. The only difference is in how the data is fetched from the GraphQL API.

react-datocms

All the following examples are using our React components to manage responsive images. With this component we can take full advantage of our optimized GraphQL API, that is returning all the information you need to provide an exceptional support to progressive, responsive images.

A deep and detailed writeup of what we offer in this blog post.

React & GraphQL Request example

GraphQL Request is a minimal GraphQL client that we've used to build probably the simplest example project of this set.

Set up the demo by clicking on the following button:

React & Apollo example

If you use Apollo to manage your data layer you can check this demo out. There's a section in the example's README that is specific to this technology that you might want to read. Here's the project code.

Set up the demo by clicking on the following button:

React & URQL example

Finally, we used URQL to build the same example using this approach. Find the repo here.

Set up the demo by clicking on the following button:

Feel like something is missing in this page?
Submit an issue or Propose a change on Github!