Apollo GraphQL: Πώς να δημιουργήσετε μια εφαρμογή πλήρους στοίβας με React και Node Js

Το Apollo Client είναι μια πλήρης βιβλιοθήκη διαχείρισης κατάστασης για εφαρμογές JavaScript. Είναι ένα ισχυρό εργαλείο, καθώς μπορεί να χρησιμοποιηθεί τόσο στην πίσω πλευρά όσο και στην μπροστινή πλευρά.

Σε αυτό το σεμινάριο, θα το χρησιμοποιήσουμε στο μπροστινό και στο πίσω μέρος δημιουργώντας έναν διακομιστή Apollo GraphQL με κόμβο JS. Στη συνέχεια, θα καταναλώσουμε τα δεδομένα από την πλευρά του πελάτη χρησιμοποιώντας το React JS.

Εάν είστε νέοι στο GraphQl, αυτό το σεμινάριο μπορεί να σας βοηθήσει. Διαφορετικά, ας ξεκινήσουμε.

  • Δημιουργία του διακομιστή με Apollo, Node και GraphQl
  • Σχήμα GraphQl
  • Αναλυτές GraphQl
  • Δημιουργία του διακομιστή Apollo
  • Χτίζοντας την πλευρά του πελάτη με το React
  • Σύνδεση React με τον Απόλλωνα
  • Ανάκτηση δεδομένων
  • Εμφάνιση των δεδομένων

Δημιουργία του διακομιστή με Apollo, Node και GraphQl

Σε αυτόν τον οδηγό, θα χρησιμοποιήσω το API Github για να δείξω δεδομένα και αυτή η λειτουργία θα γίνει από τον διακομιστή GraphQl που έχει δημιουργηθεί με Apollo και Node JS.

Για να συμβεί αυτό, πρέπει να εκτελέσουμε την ακόλουθη εντολή στο τερματικό για να δημιουργήσουμε ένα νέο έργο Node JS:

 yarn init 

Μόλις ολοκληρωθεί η εγκατάσταση, μπορούμε τώρα να εγκαταστήσουμε τα απαραίτητα πακέτα εκτελώντας αυτήν την εντολή:

 yarn add apollo-server graphql axios 

Τέλεια, έχουμε πλέον ό, τι χρειαζόμαστε για να δημιουργήσουμε έναν διακομιστή. Ας δημιουργήσουμε λοιπόν ένα νέο αρχείο app.jsστο root που θα είναι το σημείο εισόδου του διακομιστή μας.

Στη συνέχεια, πρέπει να ορίσουμε ένα σχήμα Graphql που αντικατοπτρίζει τον τρόπο εμφάνισης των δεδομένων μας.

Σχήμα GraphQl

Ένα σχήμα περιγράφει το σχήμα του γραφήματος δεδομένων σας. Καθορίζει ένα σύνολο τύπων με πεδία που συμπληρώνονται από τα αποθηκευμένα δεδομένα σας. Ας προσθέσουμε λοιπόν ένα νέο σχήμα στο app.jsαρχείο.

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

Όπως μπορείτε να δείτε, δεν χρησιμοποιούμε όλα τα δεδομένα που παρέχονται από το Github API. Χρειαζόμαστε απλώς το αναγνωριστικό που θα χρησιμοποιηθεί ως κλειδί αναφοράς στην εφαρμογή React, τα στοιχεία σύνδεσης και το avatar_url. Έχουμε επίσης ένα ερώτημα usersπου επιστρέφει μια σειρά χρηστών.

Τώρα που έχουμε ένα σχήμα GraphQL, ήρθε η ώρα να δημιουργήσουμε τους αντίστοιχους αναλυτές για να ολοκληρώσουμε τη λειτουργία ερωτήματος.

Αναλυτές GraphQl

Το resolver είναι μια συλλογή λειτουργιών που βοηθούν στη δημιουργία απόκρισης από ένα ερώτημα GraphQL. Ας προσθέσουμε λοιπόν ένα νέο πρόγραμμα ανάλυσης στο app.jsαρχείο.

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

Ένας επιλυτής πρέπει να ταιριάζει με το κατάλληλο σχήμα με το όνομα. Επομένως, εδώ usersαναφέρεται στο usersερώτημα που ορίζεται στο σχήμα μας. Είναι μια συνάρτηση που λαμβάνει τα δεδομένα από το API με τη βοήθεια axiosκαι επιστρέφει όπως αναμενόταν το αναγνωριστικό, τη σύνδεση και το avatar_url.

Και αυτή η λειτουργία μπορεί να πάρει χρόνο για να ολοκληρωθεί. Γι 'αυτό το λόγο χρησιμοποιείται το async / wait για να το χειριστεί.

Με αυτό, μπορούμε τώρα να δημιουργήσουμε τον Apollo Server στην επόμενη ενότητα.

Δημιουργία του διακομιστή Apollo

Αν θυμάστε, στο app.jsαρχείο, είχαμε εισαγάγει ApolloServerαπό το apollo-serverπακέτο. Είναι ένας κατασκευαστής που δέχεται ένα αντικείμενο ως επιχείρημα. Και αυτό το αντικείμενο πρέπει να περιέχει το σχήμα και το πρόγραμμα επίλυσης για τη δημιουργία του διακομιστή.

Λοιπόν, ας τροποποιήσουμε app.jsλίγο ApolloServer.

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

Εδώ, περνάμε ως παράμετρο ένα αντικείμενο που κρατά το σχήμα και το πρόγραμμα επίλυσης για ApolloServerνα δημιουργήσει το διακομιστή και στη συνέχεια το ακούει. Με αυτόν τον τρόπο, έχουμε πλέον έναν λειτουργικό διακομιστή για να εργαζόμαστε.

Μπορείτε ήδη να παίξετε με αυτό και να στείλετε ερωτήματα με τη βοήθεια της παιδικής χαράς GraphQL εκτελώντας αυτήν την εντολή:

 yarn start 

Τώρα μπορείτε να το κάνετε προεπισκόπηση //localhost:400

  • Το πλήρες 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] } ` 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}`)) 

Μόνο ένας διακομιστής δεν κάνει πολλά. Πρέπει να προσθέσουμε ένα σενάριο έναρξης στο package.jsonαρχείο, όπως μαντέψατε, να ξεκινήσετε τον διακομιστή.

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

Με αυτό, έχουμε έναν διακομιστή για τη λήψη δεδομένων από το Github API. Τώρα ήρθε η ώρα να μετακινηθείτε στην πλευρά του πελάτη και να καταναλώσετε τα δεδομένα.

Ας το κάνουμε.

ναι

Χτίζοντας την πλευρά του πελάτη με το React

Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε μια νέα εφαρμογή React εκτελώντας την ακόλουθη εντολή στο τερματικό:

npx create-react-app client-react-apollo 

Στη συνέχεια, πρέπει να εγκαταστήσουμε τα πακέτα Apollo και GraphQl:

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

Τώρα, μπορούμε να συνδέσουμε το Apollo με την εφαρμογή React ενημερώνοντας το index.jsαρχείο.

Σύνδεση React με τον Απόλλωνα

  • 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

Το useQueryάγκιστρο που παρέχεται από την Apollo λαμβάνει το ερώτημα GraphQL και επιστρέφει τρεις καταστάσεις: τη φόρτωση, το σφάλμα και τα δεδομένα.

Εάν τα δεδομένα ανακτηθούν με επιτυχία, τα διαβιβάζουμε στο στοιχείο χρήστη. Διαφορετικά ρίχνουμε ένα σφάλμα.

  • Το πλήρες 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 } } ` 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

Μεγάλος! Με αυτό, τώρα ολοκληρώνουμε την κατασκευή μιας πλήρους στοίβας Apollo GraphQL app χρησιμοποιώντας το React και το Node JS.

Κάντε προεπισκόπηση του Apollo GraphQL Server εδώ

Δείτε εδώ την εφαρμογή React

Βρείτε τον πηγαίο κώδικα εδώ

Μπορείτε να βρείτε άλλο υπέροχο περιεχόμενο όπως αυτό στο ιστολόγιό μου

Ευχαριστώ για την ανάγνωση!

συγχαρητήρια