Scribd
Upload
17 views

Full-Stack React + GraphQL Tutorial Part 1

Uploaded by

Fernando Fonseca
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
17 views

Full-Stack React + GraphQL Tutorial Part 1

Uploaded by

Fernando Fonseca
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 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