React CMS

// src/App.js
import { GraphQLClient, ClientContext } from 'graphql-hooks'
const endpoint = process.env.PREVIEW_MODE ?
  'https://graphql.datocms.com/preview' :
  'https://graphql.datocms.com/';
const client = new GraphQLClient({ url: endpoint });
function App() {
  return (
    <ClientContext.Provider value={client}>
      <Movie />
    </ClientContext.Provider>
  );
}
// src/Movie.js
import React from "react";
import { useQuery } from "graphql-hooks";
const Movie = () => {
  const { loading, error, data } = useQuery(
    query: `{
      movie(filter: { title: { eq: "Inception" } }) {
        title
        releaseDate
        actors {
          name
        }
      }
    }`
  );
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Something bad happened</div>;
  return (
    <div>
      <h1>{data.movie.title}</h1>
      {/* ... */}
    </div>
  );
};