React > Integrate DatoCMS with React

Building a single-page application using React and GraphQL is probably one of the fastest way to go live with a CMS-backed website.

With the globally-distributed CDN serving the Content Delivery API of DatoCMS you can serve directly content to your end users without an intermediate server. You just maintain and host a static frontend application and we deal with the rest!

Fetching content from our GraphQL API

To fetch GraphQL content with React from DatoCMS there are many options. Some of the most powerful GraphQL clients are:

• Apollo, which offers the @apollo/react-hooks package to make GraphQL queries using React hooks;

• urql, which just like Apollo acts as primary data layer and can handle content-heavy pages through "document caching";

But since you're only going to make simple queries to our API — with no mutations involved — we suggest to use a much lighter solution like graphql-hooks (2.8kB gzipped) or graphql-react.

You can even use pure JS clients like graphql-request and use them inside a React useEffect hook.

Our marketplace features many different demo projects, with different GraphQL libraries, so you can learn and get started easily:

Pure React recipe blog

Try this demo »

React.js Lodging SPA

Try this demo »

React-Apollo recipe blog

Try this demo »

React-Urql recipe blog

Try this demo »

Quick start using graphql-hooks

First create a new React application using React Create App:

npx create-react-app my-app

Then enter inside the my-app directory, install the graphql-hooks package, and start the development server:

cd my-app
yarn add graphql-hooks
yarn start

First you'll need to create a GraphQL client pointing to one of the GraphQL Content Delivery API endpoints and wrap your app with the provider:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { GraphQLClient, ClientContext } from 'graphql-hooks'
const client = new GraphQLClient({
  url: "https://graphql.datocms.com/",
  headers: {
    "Authorization": "Bearer YOUR_API_TOKEN",
  }
});
ReactDOM.render(
  <React.StrictMode>
    <ClientContext.Provider value={client}>
      <App />
    </ClientContext.Provider>
  </React.StrictMode>,
  document.getElementById("root")
);
serviceWorker.unregister();

Make sure you replace YOUR_API_TOKEN with an actual API token of your DatoCMS project. You can create a new one under "Settings > API Tokens".

Next, go to src/App.js and use the useQuery hook to perform your GrapQL query:

import React from "react";
import { useQuery } from "graphql-hooks";
import "./App.css";
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
  allBlogPosts(first: $limit) {
    title
  }
}`;
function App() {
  const { loading, error, data } = useQuery(HOMEPAGE_QUERY, {
    variables: {
      limit: 10
    }
  });
  if (loading) return "Loading...";
  if (error) return "Something Bad Happened";
  return (
    <div className="App">
      {JSON.stringify(data)}
    </div>
  );
}
export default App;

The HOMEPAGE_QUERY is the GraphQL query, and of course it depends on the models available in your define in your specific DatoCMS project.

You can learn everything you need regarding how to build GraphQL queries on our Content Delivery API documentation.