How to create MERNG (Mongo DB, Express JS, React JS, Node JS and GraphQL) app PART 2

Introduction

This part is about client-side graphql project and we use React JS, Apollo-client. Apollo-client is a npm package. It likes a redux, because of provider. If you know about redux, it can help you to understand very well. For first part, click that and then, start it.

Create Project and installation

First open the root directory, also terminal and we write such as it:

npx create-react-app client

The process takes some minutes. When it finished, we can show screen with:

npm start

In project we have ned just 2 packages (Apollo-client and React-router-dom).

I planned to make app which consist of 2 pages, one of them is form to write value and save it. The second one is main page, and we show all dates.

npm install @apollo/client react-router-dom

I think you know about React JS, but I want to help all developers. Beginner, junior, senior doesn’t matter. That’s why I try to talk all topics. Let’s delete all .css files. We make clear App.js file. But we forget to create /components folder. Inside the folder, we will create own component, though we just create for those. Write App.js file as following contents:

import React from 'react'
import { RouterBrowser as *, Router, Route, Switch, Link} from 'react-router-dom'
import UserPost from '/components/userForm';
import UserTable = from './components/user';
export default App =() =>{
 return(
  <div>
    <Link to='/table'>Go to post date</Link>
    <Link to='/post'>Go to post date</Link>
<Router>    
<Switch>
       <Route exact path='/post'>
          <UserTable />       
       </Route>
       <Route path='/post'>
          <UserPost/>
       </Route>
</Switch>
</Router>
</div>

);};

So we make template of project. Let’s start implement apollo-client.

Implementation apollo-client

Go to index.js file. And configurate our graphql API such as:

import React from 'react'; 
import App from '/App.js'
import { render } from 'react-dom';
import {   ApolloClient,   InMemoryCache,   ApolloProvider} from "@apollo/client"; 
const client = new ApolloClient({   
uri: 'http://localhost:8080/graphql',   
catch: new InMemoryCache()
render(    
<ApolloProvider client={client}>
     <App />  
 </ApolloProvider>,   document.getElementById('root'), );

The uriis end point of our graphql API. Also we can add proxy in package.json , it helps to write as only /graphql path.

"proxy" : "http://localhost:8080"

Already, we can use query and mutation in React JS. First build our component, then use to queries and mutations.

Create the Components

So we create two files inside /components folder as user.js and userForm.js files. First continue with userForm.js file. Because we need form for entering user. If user not exist, so it means we show nothing in user.js file.

The first component

If you remember, there are two fields in the query which they are name and password. It means we need two input and a button for submit. Don’t focus CSS, because of simple. Just focus structures and methods. It will like that:

import React,{useState}  from 'react';
const UserPost = ()=>{
const [name,setName] = useState('');
const [pass,setPass] = useState('');
return(
<div>
<h3>Enter Information</h3>
<input value={name} onChange={(e)=>{setName(e.target.value)}} placeholder='Name' />
<input value={pass} onChange={(e)=>{setPass(e.target.value)}} placeholder='Password' type='password' />
<button onClick={(e)=>postData(e)}>Submit</button>
</div>
)
}

Structure is ready. I think this part is common and easy for you. However I try to explain everything. We should use useMutation hook for make mutation. It likes that:

import { gql, useMutation } from '@apollo/client';
 const USER_POST = gql`   
 mutation userPost($name: String!, $password:String!) {     
   userPost(name: $name, password:$password) {
       id       
}} `;

so wee need a hook and a function work when the button is clicked.

Create hook and function

const [addTodo, { data, loading, error }] = useMutation(ADD_TODO);
const postData = ()=>{
   e.preventDefault();
   addTodo({ variables: { name,password:pass} });
   setName('');
   setPass('');
}

Now our lack is only table component such as it’s query and all data map in there. So we begin to create another part.

Create the second component

The component is so common, it’s a table and there are 2 column which they are name and password.

import React  from 'react';
const UserTable = ()=>{
 return(
    <div>
    <h3>User Information</h3>
    <table>
        <tr>
         <th>Name</th>
         <th>Password</th>
       </tr>
       {data.users.map(d=>(
       <tr>
         <td>{d.name}</td>
         <td>{d.password}</td>
       </tr>
))}
</table>
</div>
)
}

Our template is ready. Just need to get data. We use useQuery hook for it.

import { gql, useQuery } from '@apollo/client';

const GET_USER= gql`
  query users{
      name
      password
  }
`;

also

const { loading, error, data } = useQuery(GET_USER);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

Finally our project finished. Let’s run both of them: server-side and client-side.

Starting…

First we run our server go to /API folder and in the terminal write npm start , then go to /clientfolder and write npm start . That’s all. Our project is running.

Thank you for reading and I hope you enjoyed it. Any question, suggestions let me know in the comments below! As soon as next part come. See you soon.