Apollo GraphQL: Kako izraditi full-stack aplikaciju s React i Node Js

Apollo Client cjelovita je knjižnica za upravljanje državama za JavaScript aplikacije. Moćan je alat jer se može koristiti i na stražnjoj i na prednjoj strani.

U ovom uputstvu koristit ćemo ga na prednjem i stražnjem kraju izgradnjom Apollo GraphQL poslužitelja s Node JS. Tada ćemo potrošiti podatke na strani klijenta koristeći React JS.

Ako ste novi u GraphQl-u, ovaj vam vodič može pomoći. Inače, krenimo.

  • Izgradnja poslužitelja s Apollo, Node i GraphQl
  • Shema GraphQl
  • Razrješivači GraphQl
  • Izrada Apollo poslužitelja
  • Izgradnja klijentske strane s Reactom
  • Povezivanje reakcije s Apolonom
  • Dohvaćanje podataka
  • Prikazivanje podataka

Izgradnja poslužitelja s Apollo, Node i GraphQl

U ovom ću vodiču koristiti Github API kako bih imao podatke za prikaz, a tu će operaciju obavljati poslužitelj GraphQl izgrađen s Apollo i Node JS.

Da bi se to dogodilo, na terminalu moramo pokrenuti sljedeću naredbu za postavljanje novog NS JS projekta:

 yarn init 

Nakon završetka postavljanja, sada možemo instalirati potrebne pakete pokretanjem ove naredbe:

 yarn add apollo-server graphql axios 

Izvrsno, sada imamo sve što nam je potrebno za izgradnju poslužitelja. Dakle, prvo stvorimo novu datoteku app.jsu korijenu koja će biti ulazna točka našeg poslužitelja.

Dalje, moramo definirati Graphql shemu koja odražava način na koji bi naši podaci trebali izgledati.

Shema GraphQl

Shema opisuje oblik vašeg grafikona podataka. Definira skup vrsta s poljima koja se popunjavaju iz vaših pozadinskih spremišta podataka. Dakle, dodajmo novu shemu u app.jsdatoteku.

  • 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] } ` 

Kao što vidite, ne koristimo sve podatke koje pruža Github API. Samo nam treba id koji će se koristiti kao referentni ključ u aplikaciji React, prijava i avatar_url. Također imamo upit userskoji vraća niz korisnika.

Sada kada imamo shemu GraphQL, vrijeme je za izgradnju odgovarajućih razrješivača za dovršavanje operacije upita.

Razrješivači GraphQl

Razrješivač je zbirka funkcija koja pomaže generiranju odgovora iz GraphQL upita. Dakle, dodajmo novi rješivač u app.jsdatoteku.

  • 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 } }, }, } 

Razrješivač mora odgovarati odgovarajućoj shemi po imenu. Stoga se ovdje usersodnosi na usersupit definiran u našoj shemi. To je funkcija koja pomoću API-ja dohvaća podatke iz API-ja axiosi vraća očekivano ID, login i avatar_url.

A ta operacija može potrajati dok se ne završi. Zbog toga se ovdje koristi async / await za njegovo rukovanje.

Uz to, sada možemo stvoriti Apollo Server u sljedećem odjeljku.

Izrada Apollo poslužitelja

Ako se sjećate, u app.jsdatoteci smo uvezli ApolloServeriz apollo-serverpaketa. To je konstruktor koji prima objekt kao argument. A taj objekt mora sadržavati shemu i razrješivač da bi mogao stvoriti poslužitelj.

Dakle, podesimo app.jsmalo ApolloServer.

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

Ovdje kao parametar prosljeđujemo objekt koji sadrži shemu i razlučivač da ApolloServerbi stvorio poslužitelj, a zatim ga preslušava. S tim na mjestu, sada imamo funkcionalan poslužitelj za rad.

Već se možete igrati s njom i slati upite uz pomoć GraphQL igrališta pokretanjem ove naredbe:

 yarn start 

Sada ga možete pregledati na //localhost:400

  • Kompletna app.jsdatoteka
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}`)) 

Sam poslužitelj ne čini puno. U package.jsondatoteku moramo dodati početnu skriptu kako bismo, kao što pretpostavljate, pokrenuli poslužitelj.

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

Uz to, imamo poslužitelj za dohvaćanje podataka iz Github API-ja. Dakle, sada je vrijeme da pređemo na stranu klijenta i potrošimo podatke.

Učinimo to.

yaay

Izgradnja klijentske strane s Reactom

Prvo što moramo učiniti je stvoriti novu React aplikaciju izvođenjem sljedeće naredbe u terminalu:

npx create-react-app client-react-apollo 

Dalje, moramo instalirati pakete Apollo i GraphQl:

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

Sada možemo povezati Apollo s našom React aplikacijom ažuriranjem index.jsdatoteke.

Povezivanje reakcije s Apolonom

  • 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(); 

Kao što vidite, započinjemo s uvozom ApolloClienti ApolloProvider. Prva nam pomaže informirati Apollo o tome koji URL koristiti pri dohvaćanju podataka. A ako se ne uriproslijedi ApolloClient, bit će potrebno trenutno ime domene plus /graphql.

Drugi je dobavljač koji očekuje da će primiti objekt klijenta da bi mogao povezati Apollo s Reactom.

Međutim, sada možemo stvoriti komponentu koja prikazuje podatke.

Dohvaćanje podataka

  • 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 } } ` 

Ovdje imamo jednostavan GraphQL upit koji dohvaća podatke. Taj će se upit proslijediti kasnije kako useQuerybi Apolonu rekao koje podatke treba dohvatiti.

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

{login}

See profile )

Ova prezentacijska komponenta koristit će se za prikaz korisnika. Prima podatke od komponente aplikacije i prikazuje ih.

Prikazivanje podataka

  • 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

useQueryKuka pružaju Apollo prima upit GraphQL i vraća tri stanja: utovara, greška, a podaci.

Ako su podaci uspješno dohvaćeni, prosljeđujemo ih korisničkoj komponenti. U suprotnom bacamo pogrešku.

  • Kompletna App.jsdatoteka
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

Sjajno! Uz to, sada smo gotovi s izgradnjom Apollo GraphQL aplikacije s punim slogovima koristeći React i Node JS.

Ovdje pregledajte Apollo GraphQL poslužitelj

Ovdje pregledajte aplikaciju React

Izvorni kod pronađite ovdje

Na mom blogu možete pronaći i druge sjajne sadržaje poput ovog

Hvala na čitanju!

čestitamo