Prerequisites

Step to build GraphQL client using React

Note: This documentation will use GraphQL server from GraphQL Server with Spring Boot

Installing React

1
npx create-react-app react-graphql-example

or if using yarn

1
create-react-app react-graphql-example

Installing Package

Install some package that we need, especially those related to GraphQL and we will use Apollo, a GraphQL wrapper that makes it easy to interact with GraphQL. And for user interface we will use Semantic UI.

1
npm install --save graphql apollo-client-preset react-apollo graphql-tag semantic-ui-react semantic-ui-css

or

1
yarn add graphql apollo-client-preset react-apollo graphql-tag semantic-ui-react semantic-ui-css

Connect with GraphQL

Lets connect GraphQL server using ApolloClient that we add into src/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const client = new ApolloClient({
	link: new HttpLink({
		uri: 'http://localhost:8080/graphql'
	}),
	cache: new InMemoryCache()
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Query to GraphQL Server

Do query to GraphQL server from React component and makesure we have response from backend. So we first use console.log in src/App.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { Container, Feed, Card } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css'
import './App.css';

class App extends Component {
  render() {
    console.log(this.props.data);
    return (
        <Container text textAlign="center">
          <Card centered fluid>
            <Card.Content>
              <Card.Header>Person Data</Card.Header>
            </Card.Content>
            <Card.Content>
              {this.props.data.getAllPerson && (
                <Feed>
                  {this.props.data.getAllPerson.map(person => (
                      <Feed.Event key={person.id}>
                        <Feed.Content>
                          <Feed.Label content={person.firstName} />
                          <Feed.Date content={person.createdAt} />
                          <Feed.Summary>{person.address}</Feed.Summary>
                        </Feed.Content>
                      </Feed.Event>
                    ))}
                  </Feed>
                )
              }
            </Card.Content>
          </Card>
          <Card centered fluid>
            <Card.Content>
              <Card.Header>Book Data</Card.Header>
            </Card.Content>
            <Card.Content>
              {/* Iterate data here later */}
            </Card.Content>
          </Card>
        </Container>
    );
  }
}

const queries = gql`
  query {
    getAllPerson {
      id
      firstName
      lastName
      address
      createdAt
    }
    getAllBook {
        id
        title
        releaseDate
        description
        author {
            id
            firstName
            address
            createdAt
        }
        createdAt
    }
  }
`;

export default graphql(queries, {
  options: {
    variables: {

    }
  }
})(App);

Read Data from GraphQL Server

After we got data from backend, then we will render it into React component src/App.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { Container, Feed, Card } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css'
import './App.css';

class App extends Component {
  render() {
    console.log(this.props.data);
    return (
        <Container text textAlign="center">
          <Card centered fluid>
            <Card.Content>
              <Card.Header>Person Data</Card.Header>
            </Card.Content>
            <Card.Content>
              {this.props.data.getAllPerson && (
                <Feed>
                  {this.props.data.getAllPerson.map(person => (
                      <Feed.Event key={person.id}>
                        <Feed.Content>
                          <Feed.Label content={person.firstName} />
                          <Feed.Date content={person.createdAt} />
                          <Feed.Summary>{person.address}</Feed.Summary>
                        </Feed.Content>
                      </Feed.Event>
                    ))}
                  </Feed>
                )
              }
            </Card.Content>
          </Card>
          <Card centered fluid>
            <Card.Content>
              <Card.Header>Book Data</Card.Header>
            </Card.Content>
            <Card.Content>
              {this.props.data.getAllPerson && (
                <Feed>
                  {this.props.data.getAllBook.map(book => (
                      <Feed.Event key={book.id}>
                        <Feed.Content>
                          <Feed.Label>{book.title} - {book.author.firstName}</Feed.Label>
                          <Feed.Date content={book.releaseDate} />
                          <Feed.Summary>{book.description}</Feed.Summary>
                        </Feed.Content>
                      </Feed.Event>
                    ))}
                  </Feed>
                )
              }
            </Card.Content>
          </Card>
        </Container>
    );
  }
}

const queries = gql`
  query {
    getAllPerson {
      id
      firstName
      lastName
      address
      createdAt
    }
    getAllBook {
        id
        title
        releaseDate
        description
        author {
            id
            firstName
            address
            createdAt
        }
        createdAt
    }
  }
`;

export default graphql(queries, {
  options: {
    variables: {

    }
  }
})(App);

GraphQL Modelling

Thankyou

Medium - GraphQL Client Dengan React