Apollo Client este o bibliotecă completă de gestionare a stării pentru aplicații JavaScript. Este un instrument puternic, deoarece poate fi utilizat atât pe partea din spate, cât și pe partea din față.

În acest tutorial, îl vom folosi pe front end și back end prin construirea unui server Apollo GraphQL cu Node JS. Apoi vom consuma datele din partea clientului folosind React JS.

Dacă sunteți nou în GraphQl, acest tutorial s-ar putea să vă ajute. În caz contrar, să începem.

  • Construirea serverului cu Apollo, Node și GraphQl
  • Schema GraphQl
  • Rezolutori GraphQl
  • Crearea serverului Apollo
  • Construirea părții client cu React
  • Conectarea React la Apollo
  • Preluarea datelor
  • Afișarea datelor

Construirea serverului cu Apollo, Node și GraphQl

În acest ghid, voi folosi API-ul Github pentru a avea date de afișat, iar acea operațiune va fi făcută de serverul GraphQl construit cu Apollo și Node JS.

Pentru a face acest lucru, trebuie să rulăm următoarea comandă pe terminal pentru a configura un nou proiect Node JS:

ad-banner
  yarn init

Odată ce configurarea este finalizată, acum putem instala pachetele necesare executând această comandă:

  yarn add apollo-server graphql axios

Super, acum avem tot ce ne trebuie pentru a construi un server. Deci, mai întâi să creăm un fișier nou app.js în rădăcina care va fi punctul de intrare al serverului nostru.

În continuare, trebuie să definim o schemă Graphql care reflectă modul în care ar trebui să arate datele noastre.

Schema GraphQl

O schemă descrie forma graficului dvs. de date. Acesta definește un set de tipuri cu câmpuri care sunt populate din magazinele de date back-end. Deci, să adăugăm o nouă schemă în app.js fişier.

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

După cum puteți vedea, nu folosim toate datele furnizate de API-ul Github. Avem nevoie doar de ID-ul care va fi folosit ca cheie de referință în aplicația React, datele de conectare și avatar_url. Avem și o interogare users care returnează o serie de utilizatori.

Acum că avem o schemă GraphQL, este timpul să construim rezoluții corespunzători pentru a finaliza operația de interogare.

Rezolutori GraphQl

Un resolver este o colecție de funcții care ajută la generarea unui răspuns dintr-o interogare GraphQL. Deci, să adăugăm un nou rezolvator în app.js fişier.

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

Un rezolvator trebuie să se potrivească schemei corespunzătoare după nume. Prin urmare, aici users se referă la users interogare definită în schema noastră. Este o funcție care preia datele din API cu ajutorul axios și returnează după cum era de așteptat id-ul, datele de conectare și avatar_url.

Iar acea operațiune poate dura mult timp. De aceea, async / await este folosit aici pentru a-l gestiona.

Cu aceasta, acum putem crea serverul Apollo în secțiunea următoare.

Crearea serverului Apollo

Dacă vă amintiți, în app.js fișier, am importat ApolloServer de la apollo-server pachet. Este un constructor care primește un obiect ca argument. Și acel obiect trebuie să conțină schema și rezolvatorul pentru a putea crea serverul.

Deci, hai să modificăm app.js un pic cu ApolloServer.

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

Aici, trecem ca parametru un obiect care ține schema și rezolvatorul ApolloServer pentru a crea serverul și apoi îl ascultă. Având în vedere acest lucru, avem acum un server funcțional cu care să lucrăm.

Puteți să vă jucați deja și să trimiteți interogări cu ajutorul locului de joacă GraphQL executând această comandă:

  yarn start

Acum îl puteți previzualiza pe http://localhost:400

  • Complet app.js fişier
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("https://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}`))

Un server singur nu face mare lucru. Trebuie să adăugăm un script de pornire în package.json pentru a porni serverul, după cum ați ghicit.

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

Cu aceasta, avem un server pentru a prelua date din API-ul Github. Deci, acum este timpul să treceți la partea clientului și să consumați datele.

S-o facem.

da

Construirea părții client cu React

Primul lucru pe care trebuie să-l facem este să creăm o nouă aplicație React executând următoarea comandă în terminal:

npx create-react-app client-react-apollo

Apoi, trebuie să instalăm pachetele Apollo și GraphQl:

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

Acum, putem conecta Apollo la aplicația noastră React prin actualizarea index.js fişier.

Conectarea React la 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: 'https://7sgx4.sse.codesandbox.io'
})


ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

După cum puteți vedea, începem prin import ApolloClient și ApolloProvider. Primul ne ajută să-l informăm pe Apollo despre ce adresă URL să utilizăm la preluarea datelor. Și dacă nu uri este trecut la ApolloClient, va lua numele de domeniu curent plus /graphql.

Al doilea este Furnizorul care se așteaptă să primească obiectul client pentru a putea conecta Apollo la React.

Acestea fiind spuse, acum putem crea o componentă care arată datele.

Preluarea datelor

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

Aici avem o interogare simplă GraphQL care preia datele. Această interogare va fi transmisă ulterior către useQuery să-i spun lui Apollo ce date să aducă.

  • App.js
const User = ({ user: { login, avatar_url } }) => (
  <div className="Card">
    <div>
      <img alt="avatar" className="Card--avatar" src={avatar_url} />
      <h1 className="Card--name">{login}</h1>
    </div>
    <a href={`https://github.com/${login}`} className="Card--link">
      See profile
    </a>
  </div>
)

Această componentă de prezentare va fi utilizată pentru a afișa un utilizator. Acesta primește datele de la componenta aplicației și le afișează.

Afișarea datelor

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

  if (error) return <h1>Something went wrong!</h1>
  if (loading) return <h1>Loading...</h1>

  return (
    <main className="App">
      <h1>Github | Users</h1>
      {data.users.map(user => (
        <User key={user.id} user={user} />
      ))}
    </main>
  )
}

export default App

useQuery cârligul furnizat de Apollo primește interogarea GraphQL și returnează trei stări: încărcarea, eroarea și datele.

Dacă datele sunt preluate cu succes, le transmitem componentei User. Altfel aruncăm o eroare.

  • Complet App.js fişier
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 } }) => (
  <div className="Card">
    <div>
      <img alt="avatar" className="Card--avatar" src={avatar_url} />
      <h1 className="Card--name">{login}</h1>
    </div>
    <a href={`https://github.com/${login}`} className="Card--link">
      See profile
    </a>
  </div>
)

function App() {
  const { loading, error, data } = useQuery(GET_USERS)

  if (error) return <h1>Something went wrong!</h1>
  if (loading) return <h1>Loading...</h1>

  return (
    <main className="App">
      <h1>Github | Users</h1>
      {data.users.map(user => (
        <User key={user.id} user={user} />
      ))}
    </main>
  )
}

export default App

Grozav! Cu aceasta, acum am terminat de construit o aplicație Apollo GraphQL full-stack folosind React și Node JS.

Previzualizați serverul Apollo GraphQL Aici

Previzualizați aplicația React Aici

Găsiți codul sursă Aici

Puteți găsi alt conținut excelent ca acesta pe blogul meu

Mulțumesc pentru lectură!

felicitări