1
import { GraphQLClient, ClientContext } from 'graphql-hooks'
2

3
const endpoint = process.env.PREVIEW_MODE ?
4
  'https://graphql.datocms.com/preview' :
5
  'https://graphql.datocms.com/';
6

7
const client = new GraphQLClient({ url: endpoint });
8

9
function App() {
10
  return (
11
    <ClientContext.Provider value={client}>
12
      <Movie />
13
    </ClientContext.Provider>
14
  );
15
}
16

17
// src/Movie.js
18

19
import React from "react";
20
import { useQuery } from "graphql-hooks";
21

22
const Movie = () => {
23
  const { loading, error, data } = useQuery(
24
    query: `{
25
      movie(filter: { title: { eq: "Inception" } }) {
26
        title
27
        releaseDate
28
        actors {
29
          name
30
        }
31
      }
32
    }`
33
  );
34

35
  if (loading) return <div>Loading...</div>;
36
  if (error) return <div>Something bad happened</div>;
37

38
  return (
39
    <div>
40
      <h1>{data.movie.title}</h1>
41
      {/* ... */}
42
    </div>
43
  );
44
};