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

Download WP-GraphQL from https://github.com/wp-graphql/wp-graphql and rename it wp-graphql. Install it in WordPress and active this plugin as usual. Then, visit

domain.name/?graphql

If it shows a page of error, then confirmed wp-graphql plugin works.

Let’s create a brand new react app whether you want.

npx create-react-app apollographql

After npm finishes setup a new react app. Go to apollographql project folder and start this app.

cd apollographql && npm start

We need to install three packages to use graphQL in React. Apollo makes possible to write a query in GraphQL.

• apollo-boost
• react-apollo
• graphql

We will take a shot on small CSS framework https://milligram.io/ for quick style. We will also try styled components also. To check out its advantage please see the styled component’s motivation page.
To use a pagination system in a one-page application we will use react-router. Also, for safe DOM render in react application we will use dompurify. Install these packages with this command. By default, these packages install for development only.

npm i apollo-boost react-apollo graphql react-router-dom milligram styled-components dompurify

Here, i is the command is shorthand for install command. After these package installed, we have a total of 10 packages to use.

We will create some components. These are:

• AppRouter
• App
• Posts
• PostWidget
• Post
• NotFound

First delete src/index.css and src/App.js.
Open src/index, where application start its journey. Remove index.css and App.js imports. At last, use AppRouter from AppRouter.js. So the final code of src/index.js will be

import React from "react";
import ReactDOM from "react-dom";
import AppRouter from "./AppRouter";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<AppRouter />, document.getElementById("root"));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

AppRouter component’s first connections are App, Post, and NotFound components. The App component is combined with Posts and PostWidget components.
Posts and PostWidget components will use in the App component, Post component for a single post and NotFound component for the wrong URL enter our application. Let’s, create these components.

First, create a file src/AppRouter.js. Be sure about the naming convention. React follow camel casing for both filename and class name.
Open src/AppRouter.js. We know, for every React component we have to import React from React core package. Let’s define the AppRouter component in src/AppRouter.js.

import React from "react";

class AppRouter extends React.Component {
  render() {
    return <div>Router</div>;
  }
}
export default AppRouter;

For this Application, we will take advantage of ES6 and JSX. If you are interested in what does mean default export and named export, take a look at MDN’s docs.

Delete src/App.js. Create a folder component. In this folder, create App.js, Posts.js, PostWidget.js, Post.js, NotFound.js. Here, just declare a component class for now.

Open src/components/App.js and write the following code.

import React from "react";

class App extends React.Component {
  render() {
    return <div>App</div>;
  }
}
export default App;

Open src/Posts.js and write the following code.

import React from "react";

class Posts extends React.Component {
  render() {
    return <div>Post Archive</div>;
  }
}
export default Posts;

Open src/components/Post.js and write the following code.

import React from "react";

class Post extends React.Component {
  render() {
    return <div>Single Post</div>;
  }
}
export default Post;

Open src/components/PostWidget.js and write the following code.

import React from "react";

class PostWidget extends React.Component {
  render() {
    return <div>Post Widget</div>;
  }
}
export default PostWidget;

Open src/components/NotFound.js and write the following code.

import React from "react";

class NotFound extends React.Component {
  render() {
    return <div>Not Found!!!</div>;
  }
}
export default NotFound;