Home GraphQL Reactjs GraphQL Tutorial – Fetching Data

Reactjs GraphQL Tutorial – Fetching Data

by therichpost
Reactjs GraphQL Tutorial - Fetching Data

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs GraphQL Tutorial – Fetching Data.

React GraphQL
Reactjs GraphQL Tutorial - Fetching Data
Reactjs GraphQL Tutorial – Fetching Data

For reactjs new comers, please check the below links. For application better look I use Bootstrap 5:

Reactjs Basic Tutorials

Bootstrap 5 Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reactgql

cd reactgql

2. Now we need to run below commands into our project terminal to get bootstrap( Optional ), graphql related modules into our reactjs application:

npm install bootstrap@next --save

npm install @apollo/client graphql

npm start

3. Finally for the main output, we need to add below code into our reactboot5/src/App.js file or if you have fresh setup then you can replace reactgql/src/App.js file code with below code:

import React from 'react';

//Bootstrap and graphql libraries
import 'bootstrap/dist/css/bootstrap.min.css';

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

//set data query
const STATIONS_QUERY = gql`
    stations {

export default function App() {
  const { data, loading, error } = useQuery(STATIONS_QUERY); //create query
  if (loading) return "Loading..."; //query processing
  if (error) return <pre>{error.message}</pre> //if query has issue

  return (
    <div className="container p-5">
      <h1 className="mb-3">Therichpost.com</h1>
      <table class="table table-striped table-hover table-bordered table-lg">
        <th scope="col">Station ID</th>
        <th scope="col">Station Name</th>
        <th>num bikes available</th>
        {data.stations.map((station) => (

4. Guy’s we need to add below code into our reactgql/src/index.js file for set the Apollo client modules:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
import App from './App';

//calling api
const client = new ApolloClient({
  uri: "yourgraphqlURL",
  cache: new InMemoryCache()

  <ApolloProvider client={client}>
  <App />

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.



You may also like


Munesh May 26, 2021 - 1:00 pm

How do you connect the front and backend?


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.