This is the second part of Create react app with GraphQL way of WordPress data

In this part, we will build src/AppRouter.js.

We will use { BrowserRouter, Route, Switch } from react-router-dom.
We will use ApolloClient and {gql} from apollo-boost package to connect React with Apollo. And import milligram CSS.
We will use the App component here. Also, import Post and NotFound components in src/AppRouter.js from respective files.

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import ApolloClient, { gql } from "apollo-boost";
import "milligram";
import App from './components/App';
import Post from './components/Post';
import NotFound from './components/NotFound';

We will use react-router-dom’s { BrowserRouter, Route, Switch } classes in this file.

render() {
    return (
      <div className="container">
        <BrowserRouter>
          <Switch>
            <Route
              exact
              path="/"
              render={props => <App {...props} state={this.state.posts} />}
            />
            <Route
              path="/post/:postID"
              render={props => <Post {...props} state={this.state.posts} />}
            />
            <Route component={NotFound} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }

Here, the mechanism of Switch is like that,

• When URL is root BrowserRouter render App component.
• If the URL is going to a single post, the BrowserRouter component renders the Post component. Here :postID placeholder will be changed with real post id. The post component will pass a copy of props and state. Notice that, three dots (…props) means to copy the props.
• If any user goes to URL which is non-defined, BrowserRouter renders NotFound component.

In AppRouter class, the state is defined here. We can store data in state and use this state in a different component.

state = {
  posts: []
},

At this point, we will use the componentDidMount life cycle. This life cycle fired when component mounted.

Here, we will use an instance of ApolloClient class. ApolloClient class needs URI which is https://mrinalbd.com/?graphql .

componentDidMount() {
  const client = new ApolloClient({
    uri: 'https://mrinalbd.com/?graphql'
  });
}

After a defined client, we will run graphql query and then set posts in state. Let’s start dig in the mud. Plan for now –
Step 1: ApolloClient’s instance client has a query method. In this query, we can use gql (graphql) which we imported at the start of this file.
Step 2: If this query successful then run a function. In this function, we will write a command to store these data

Second, write the codes.

client
    .query({
      query: gql`
        {
          generalSettings {
              title
            }
          posts {
            edges {
              node {
                id
                title
                date
                link
                content
                excerpt
              }
            }
          }
        }
      `
    })
    .then(result => {
      this.setState({ posts: result.data.posts.edges });
    });

It is long code (for me). So break it down.
First, we run a query to fetch data. This query is from official documentation of wpgraphql. https://docs.wpgraphql.com/getting-started/posts.
Second, run the promise of the client. In this method, we write an array function where result is a parameter. This function command to state, let’s update. setState is the recommended method to update state. And in this method update posts by post’s data, which we get from the previous query.
So, Final code of src/AppRouter.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import ApolloClient, { gql } from "apollo-boost";
import App from "./components/App";
import Post from "./components/Post";
import NotFound from "./components/NotFound";

class AppRouter extends React.Component {
  state = {
    posts: []
  };

  componentDidMount() {
    const client = new ApolloClient({
      uri: "https://mrinalbd.com/?graphql"
    });
    client
      .query({
        query: gql`
          {
            posts {
              edges {
                node {
                  id
                  title
                  date
                  link
                  content
                  excerpt
                }
              }
            }
          }
        `
      })
      .then(result => {
        this.setState({ posts: result.data.posts.edges });
      });
  }
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" render={props => <App {...props} state={this.state.posts} />} />
          <Route
            path="/post/:postID"
            render={props => <Post {...props} state={this.state.posts} />}
          />
          <Route component={NotFound} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default AppRouter;