0% found this document useful (0 votes)
17 viewsFull-Stack React + GraphQL Tutorial Part 1
Uploaded by
Fernando FonsecaCopyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
17 viewsFull-Stack React + GraphQL Tutorial Part 1
Uploaded by
Fernando FonsecaCopyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
/ 12
orm Full-stack React + Graph. Tutorial —Apallo Graph,
; Jonas Helfer
Full-stack React + GraphQL Tutorial
Part 1—the frontend: Declarative data fetching and
mocking with Apollo
eo eT)
coer) eer)
arenes SOC Raae
GraphQL is a new API-definition and query language that has the
potential to become the new REST. It makes it easy for UI components
to declaratively fetch data without having to worry about backend
implementation details. Because it’s such a powerful abstraction,
GraphQL can speed up app development and make code much easier
to maintain,
However, despite the great advantages of using GraphQL, the first
step can be a bit daunting, That's why I've started writing a series of
tutorials that take you step by step through building a full-stack React
app with GraphQL and Apollo Client. The series will guide you
through the entire process of building an instant messaging app which
uses GraphQL throughout:
+ Part (this part): Setting up a simple client
+ Part 2: Setting up a simple server
nipidev-tlogapalodala comiful-stack-react-grapha-eril-S82acB24e wa orm
Full-stack React + Graph. Tutorial —Apallo Graph,
+ Part g: Writing mutations and keeping the client in sync
+ Part 4: Optimistic UL and client side store updates
+ Parts: Input Types and Custom Cache Resolvers
+ Part 6: Subscriptions on the server
+ Part z: GraphQL. Subscriptions on the Client
This tutorial—the first in the series—is about getting started with
GraphQL on the frontend. It only takes about 20-30 minutes, and by
the end of it you'll have a very simple React UI that loads its data with
GraphQI. and looks something like this:
SO hocathost:
Welcome to Apollo
Asirpler
Let’s get started!
1. Getting set up
Note: To do this tutorial you will need to have node, npm and git
installed on your machine, and know a little bit about React,
We're going to use create-react-app in this tutorial, so go ahead
and install that:
> npm install -g create-react-app
We'll also clone the tutorial repository from GitHub, which has some
CSS and images in it that we'll use later.
nipidev-tlogapalodala comful-stack-reac-grapha-eril-S82act24e ana orm Full-stack React + Graph. Tutorial —Apallo Graph,
> git clone https://github.con/apollographal/graphal-
rial.git
> ed graphgi-tutorial
Next, we create our react app with
eact-app
> cd client
To make sure it’s working, let's start our server:
> npm sta
If it all worked, you should now see the following in your browser:
S [© becathost 3
at) HO
Welcome to React
To get storied, edit axe/app. 32 and save to reload.
2. Writing the first component
Since we're building an app with Apollo here, let's change the logo
and CSS by copying over 2oso.svg and app.ces
from ../zesources
> ed ere
> ep ../.-/resources/*
nipidev-tlogapalodala comiful-stack-react-grapha-eril-S82acB24e ana orm Full-stack React + Graph. Tutorial —Apallo Graph,
To keep this initial tutorial short, we'll only build a simple list view
today. Let's change a few things in app.js :
1, Change “Welcome to React” to “Welcome to Apollo”. Apollo is
the name of the GraphQL client we're going to use throughout,
this tutorial series.
2, Remove the “To get started .” paragraph and replace it with a
pure React component that renders an unordered list
- with
two list items <1i> , “Channel 1” and “Channel 2” (yes, you
guessed it, we're going to build a messaging app!). Let's name
our list component channetenist
Now your app.je should look like this:
import React, { Component } from ‘react';
import logo from './logo-svg'
import './app.css"?
const Channelsist = () >
(eun>
Welcone to Apollo
loading ...
s ) if (error) { return{error.message}
) return-
( channels.map( ch => <1i key={ch.id}>{ch.name}