Apollo GraphQL: So erstellen Sie eine Full-Stack-App mit React und Node Js

Apollo Client ist eine vollständige Statusverwaltungsbibliothek für JavaScript-Apps. Es ist ein leistungsstarkes Werkzeug, da es sowohl am hinteren als auch am vorderen Ende verwendet werden kann.

In diesem Tutorial verwenden wir es im Front-End und Back-End, indem wir einen Apollo GraphQL-Server mit Node JS erstellen. Dann werden wir die Daten auf der Clientseite mit React JS verbrauchen.

Wenn Sie GraphQl noch nicht kennen, kann Ihnen dieses Tutorial helfen. Ansonsten fangen wir an.

  • Erstellen des Servers mit Apollo, Node und GraphQl
  • GraphQl-Schema
  • GraphQl-Resolver
  • Erstellen des Apollo-Servers
  • Erstellen der Clientseite mit React
  • Verbinden Reagieren Sie mit Apollo
  • Daten abrufen
  • Daten anzeigen

Erstellen des Servers mit Apollo, Node und GraphQl

In diesem Handbuch werde ich die Github-API verwenden, um Daten anzuzeigen, und diese Operation wird vom GraphQl-Server ausgeführt, der mit Apollo und Node JS erstellt wurde.

Um dies zu erreichen, müssen wir den folgenden Befehl auf dem Terminal ausführen, um ein neues Node JS-Projekt einzurichten:

 yarn init 

Sobald die Einrichtung abgeschlossen ist, können wir die erforderlichen Pakete installieren, indem wir diesen Befehl ausführen:

 yarn add apollo-server graphql axios 

Großartig, wir haben jetzt alles, was wir brauchen, um einen Server zu bauen. Erstellen wir also zuerst eine neue Datei app.jsim Stammverzeichnis, die der Einstiegspunkt unseres Servers ist.

Als nächstes müssen wir ein Graphql-Schema definieren, das das Aussehen unserer Daten widerspiegelt.

GraphQl-Schema

Ein Schema beschreibt die Form Ihres Datendiagramms. Es definiert eine Reihe von Typen mit Feldern, die aus Ihren Back-End-Datenspeichern ausgefüllt werden. Fügen wir also ein neues Schema in die app.jsDatei ein.

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

Wie Sie sehen, verwenden wir nicht alle von der Github-API bereitgestellten Daten. Wir brauchen nur die ID, die als Referenzschlüssel in der React App, dem Login und der avatar_url verwendet wird. Wir haben auch eine Abfrage users, die ein Array von Benutzern zurückgibt.

Nachdem wir nun ein GraphQL-Schema haben, ist es Zeit, die entsprechenden Resolver zu erstellen, um den Abfragevorgang abzuschließen.

GraphQl-Resolver

Ein Resolver ist eine Sammlung von Funktionen, mit deren Hilfe eine Antwort aus einer GraphQL-Abfrage generiert werden kann. Fügen wir also einen neuen Resolver in die app.jsDatei ein.

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

Ein Resolver muss dem entsprechenden Schema nach Namen entsprechen. Daher usersbezieht sich hier auf die usersin unserem Schema definierte Abfrage. Diese Funktion ruft die Daten mithilfe der API von der API ab axiosund gibt erwartungsgemäß die ID, das Login und die avatar_url zurück.

Dieser Vorgang kann einige Zeit in Anspruch nehmen. Deshalb wird hier async / await verwendet, um damit umzugehen.

Damit können wir jetzt im nächsten Abschnitt den Apollo Server erstellen.

Erstellen des Apollo-Servers

Wenn Sie sich erinnern, app.jshatten wir in der Datei ApolloServeraus dem apollo-serverPaket importiert . Es ist ein Konstruktor, der ein Objekt als Argument empfängt. Und dieses Objekt muss das Schema und den Resolver enthalten, um den Server erstellen zu können.

Also, lasst uns app.jsein bisschen mit optimieren ApolloServer.

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

Hier übergeben wir als Parameter ein Objekt, das das Schema und den Resolver enthält ApolloServer, um den Server zu erstellen und ihn dann abzuhören. Damit haben wir jetzt einen funktionierenden Server, mit dem wir arbeiten können.

Sie können bereits damit spielen und mithilfe des GraphQL-Spielplatzes Abfragen senden, indem Sie diesen Befehl ausführen:

 yarn start 

Sie können jetzt eine Vorschau anzeigen //localhost:400

  • Die vollständige app.jsDatei
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}`)) 

Ein Server allein macht nicht viel. Wir müssen der package.jsonDatei ein Startskript hinzufügen , um den Server zu starten.

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

Damit haben wir einen Server, um Daten von der Github-API abzurufen. Jetzt ist es an der Zeit, auf die Clientseite zu wechseln und die Daten zu konsumieren.

Machen wir das.

yaay

Erstellen der Clientseite mit React

Als erstes müssen wir eine neue React App erstellen, indem wir den folgenden Befehl im Terminal ausführen:

npx create-react-app client-react-apollo 

Als nächstes müssen wir die Apollo und GraphQl Pakete installieren:

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

Jetzt können wir Apollo mit unserer React App verbinden, indem wir die index.jsDatei aktualisieren .

Verbinden Reagieren Sie mit 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

Der useQueryvon Apollo bereitgestellte Hook empfängt die GraphQL-Abfrage und gibt drei Zustände zurück: das Laden, den Fehler und die Daten.

Wenn die Daten erfolgreich abgerufen wurden, übergeben wir sie an die Benutzerkomponente. Ansonsten werfen wir einen Fehler.

  • Die vollständige App.jsDatei
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

Toll! Damit sind wir nun mit der Erstellung einer Full-Stack-Apollo GraphQL-App mit React und Node JS fertig.

Hier können Sie eine Vorschau des Apollo GraphQL Servers anzeigen

Hier können Sie eine Vorschau der React App anzeigen

Den Quellcode finden Sie hier

Sie können andere großartige Inhalte wie diesen auf meinem Blog finden

Danke fürs Lesen!

Glückwunsch