Setup for React front-end with GraphQL to Fetch WordPress back-end

This is first part of Create react app with GraphQL in WordPress

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
WP-Graphql success message
wpgraphql success message

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

Let’s create a brand new react app by

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.

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 styled component’s motivation page.
To use a pagination system in 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 total of 10 packages to use.

We will create some components. These are:

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

Open src/index.js, because it application start. Remove index.css and in App import. At last, use AppRouter in ReactDom. So the final code at src/index.js

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 is defined as App, Post, and NotFound. The app is mixed up with Posts and PostWidget.
Posts and a 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 in src named 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 package. For the first sight, we will define AppRouter in this file.

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 this.
Besides these packages, we will also use five custom components.
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;

7 thoughts on “Setup for React front-end with GraphQL to Fetch WordPress back-end”

    1. Thanks for comment, Dank.
      Modular programming means, full program (application) separate in various modules. It also called, separation of concerns approach to solve problems.

Leave a Reply

Your email address will not be published. Required fields are marked *