Apollo GraphQL: Sådan oprettes en full-stack-app med React og Node Js

Apollo Client er et komplet statsadministrationsbibliotek til JavaScript-apps. Det er et kraftfuldt værktøj, da det kan bruges på både bagenden og forenden.

I denne vejledning bruger vi den i frontenden og bagenden ved at opbygge en Apollo GraphQL-server med Node JS. Derefter forbruger vi dataene på klientsiden ved hjælp af React JS.

Hvis du ikke er god med GraphQl, kan denne tutorial hjælpe dig. Ellers lad os komme i gang.

  • Opbygning af serveren med Apollo, Node og GraphQl
  • GraphQl-skema
  • GraphQl-opløsere
  • Oprettelse af Apollo Server
  • Opbygning af klientsiden med React
  • Tilslutning af React til Apollo
  • Henter data
  • Viser dataene

Opbygning af serveren med Apollo, Node og GraphQl

I denne vejledning vil jeg bruge Github API til at have data at vise, og denne operation udføres af GraphQl-serveren bygget med Apollo og Node JS.

For at få dette til at ske skal vi køre følgende kommando på terminalen for at oprette et nyt Node JS-projekt:

 yarn init 

Når opsætningen er færdig, kan vi nu installere de nødvendige pakker ved at køre denne kommando:

 yarn add apollo-server graphql axios 

Fantastisk, vi har nu alt hvad vi behøver for at opbygge en server. Så lad os først oprette en ny fil app.jsi roden, som vil være indgangsstedet for vores server.

Dernæst skal vi definere et Graphql-skema, der afspejler den måde, vores data skal se ud på.

GraphQl-skema

Et skema beskriver formen på din datagraf. Det definerer et sæt typer med felter, der udfyldes fra dine backend-datalagre. Så lad os tilføje et nyt skema i app.jsfilen.

  • app.js
const { ApolloServer, gql } = require("apollo-server") const axios = require("axios") const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { users: [User] } ` 

Som du kan se, bruger vi ikke alle data leveret af Github API. Vi har bare brug for id'et, der vil blive brugt som referencenøgle i React App, login og avatar_url. Vi har også en forespørgsel, usersder returnerer en række brugere.

Nu hvor vi har et GraphQL-skema, er det tid til at opbygge de tilsvarende resolvere for at fuldføre forespørgslen.

GraphQl-opløsere

En resolver er en samling af funktioner, der hjælper med at generere et svar fra en GraphQL-forespørgsel. Så lad os tilføje en ny resolver i app.jsfilen.

  • app.js
const resolvers = { Query: { users: async () => { try { const users = await axios.get("//api.github.com/users") return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url, })) } catch (error) { throw error } }, }, } 

En resolver skal matche det relevante skema ved navn. Derfor usershenviser her til den usersforespørgsel, der er defineret i vores skema. Det er en funktion, der henter dataene fra API'en ved hjælp af axiosog returnerer som forventet id, login og avatar_url.

Og den operation kan tage tid at gennemføre. Derfor bruges async / wait her til at håndtere det.

Med det kan vi nu oprette Apollo Server i næste afsnit.

Oprettelse af Apollo Server

Hvis du husker, i app.jsfilen, havde vi importeret ApolloServerfra apollo-serverpakken. Det er en konstruktør, der modtager et objekt som et argument. Og det objekt skal indeholde skemaet og opløseren for at være i stand til at oprette serveren.

Så lad os tilpasse app.jslidt med ApolloServer.

  • app.js
const server = new ApolloServer({ typeDefs, resolvers, }) // typeDefs: typeDefs, // resolvers: resolvers server.listen().then(({ url }) => console.log(`Server ready at ${url}`)) 

Her sender vi som en parameter et objekt, der holder skemaet og opløseren til ApolloServerat oprette serveren og derefter lytter til det. Med det på plads har vi nu en funktionel server at arbejde med.

Du kan allerede lege med det og sende forespørgsler ved hjælp af GraphQL legeplads ved at køre denne kommando:

 yarn start 

Du kan nu få vist det på //localhost:400

  • Den komplette app.jsfil
const { ApolloServer, gql } = require("apollo-server") const axios = require("axios") const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { users: [User] } ` const resolvers = { Query: { users: async () => { try { const users = await axios.get("//api.github.com/users") return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url, })) } catch (error) { throw error } }, }, } const server = new ApolloServer({ typeDefs, resolvers, }) server.listen().then(({ url }) => console.log(`Server ready at ${url}`)) 

En server alene gør ikke meget. Vi er nødt til at tilføje et start-script i package.jsonfilen til, som du gættede, starte serveren.

  • package.json
 // first add nodemon: yarn add nodemon --dev "scripts": { "start": "nodemon src/index.js" } 

Med det har vi en server til at hente data fra Github API. Så nu er det tid til at flytte til klientsiden og forbruge dataene.

Lad os gøre det.

yaay

Opbygning af klientsiden med React

Den første ting, vi skal gøre er at oprette en frisk React-app ved at køre følgende kommando i terminalen:

npx create-react-app client-react-apollo 

Dernæst skal vi installere Apollo- og GraphQl-pakkerne:

 yarn add apollo-boost @apollo/react-hooks graphql 

Nu kan vi forbinde Apollo med vores React-app ved at opdatere index.jsfilen.

Tilslutning af React til Apollo

  • index.js
import React from 'react'; import ReactDOM from 'react-dom'; import ApolloClient from 'apollo-boost' import { ApolloProvider } from '@apollo/react-hooks'; import App from './App'; import './index.css'; import * as serviceWorker from './serviceWorker'; const client = new ApolloClient({ uri: '//7sgx4.sse.codesandbox.io' }) ReactDOM.render(     , document.getElementById('root') ); serviceWorker.unregister(); 

As you can see, we start by importing ApolloClient and ApolloProvider. The first helps us inform Apollo about which URL to use when fetching data. And if no uri is passed to ApolloClient, it will take the current domain name plus /graphql.

The second is the Provider which expects to receive the client object to be able to connect Apollo to React.

That said, we can now create a component that shows the data.

Fetching the data

  • App.js
import React from "react" import { useQuery } from "@apollo/react-hooks" import gql from "graphql-tag" import "./App.css" const GET_USERS = gql` { users { id login avatar_url } } ` 

Here, we have a simple GraphQL query that fetches the data. That query will be passed later to useQuery to tell Apollo which data to fetch.

  • App.js
const User = ({ user: { login, avatar_url } }) => ( 

{login}

See profile )

This presentational component will be used to display a user. It receives the data from the App component and displays it.

Showing the data

  • App.js
function App() { const { loading, error, data } = useQuery(GET_USERS) if (error) return 

Something went wrong!

if (loading) return

Loading...

return (

Github | Users

{data.users.map(user => ( ))} ) } export default App

Den useQuerykrog, som Apollo modtager GraphQL forespørgslen og returnerer tre tilstande: lastedelene, fejlen, og data.

Hvis dataene er hentet med succes, videregiver vi dem til brugerkomponenten. Ellers kaster vi en fejl.

  • Den komplette App.jsfil
import React from "react" import { useQuery } from "@apollo/react-hooks" import gql from "graphql-tag" import "./App.css" const GET_USERS = gql` { users { id login avatar_url } } ` const User = ({ user: { login, avatar_url } }) => ( 

{login}

See profile ) function App() { const { loading, error, data } = useQuery(GET_USERS) if (error) return

Something went wrong!

if (loading) return

Loading...

return (

Github | Users

{data.users.map(user => ( ))} ) } export default App

Store! Med det er vi nu færdige med at opbygge en fuld stack Apollo GraphQL-app ved hjælp af React og Node JS.

Se Apollo GraphQL Server her

Se eksempel på React-appen her

Find kildekoden her

Du kan finde andet godt indhold som dette på min blog

Tak for læsningen!

tillykke