Apollo Client adalah perpustakaan pengurusan negeri yang lengkap untuk aplikasi JavaScript. Ini adalah alat yang kuat kerana boleh digunakan di hujung belakang dan bahagian depan depan.

Dalam tutorial ini, kita akan menggunakannya di hujung depan dan hujung belakang dengan membina Apollo GraphQL Server dengan Node JS. Kemudian kami akan menggunakan data di sisi pelanggan menggunakan React JS.

Sekiranya anda baru menggunakan GraphQl, tutorial ini mungkin dapat membantu anda. Jika tidak, mari kita mulakan.

• Membina pelayan dengan Apollo, Node, dan GraphQl
• Skema GraphQl
• Penyelesai GraphQl
• Membuat Pelayan Apollo
• Membangun Pelanggan dengan React
• Menghubungkan React ke Apollo
• Mengambil data
• Menunjukkan data

Membina pelayan dengan Apollo, Node, dan GraphQl

Dalam panduan ini, saya akan menggunakan API Github untuk menunjukkan data, dan operasi itu akan dilakukan oleh pelayan GraphQl yang dibina dengan Apollo dan Node JS.

Untuk mewujudkannya, kita perlu menjalankan perintah berikut di terminal untuk menyediakan projek Node JS baru:

 yarn init 

Setelah penyiapan selesai, kita sekarang dapat memasang pakej yang diperlukan dengan menjalankan perintah ini:

 yarn add apollo-server graphql axios 

Hebat, sekarang kita mempunyai semua yang kita perlukan untuk membina pelayan. Oleh itu, mari buat fail baru app.jsdi root yang akan menjadi titik masuk pelayan kami.

Seterusnya, kita perlu menentukan skema Graphql yang mencerminkan penampilan data kita.

Skema GraphQl

Skema menerangkan bentuk grafik data anda. Ini menentukan sekumpulan jenis dengan bidang yang dihuni dari kedai data belakang anda. Oleh itu, mari tambah skema baru dalam app.jsfail.

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

Seperti yang anda lihat, kami tidak menggunakan semua data yang disediakan oleh API Github. Kami hanya memerlukan id yang akan digunakan sebagai kunci rujukan pada Aplikasi React, login dan avatar_url. Kami juga mempunyai pertanyaan usersyang mengembalikan pelbagai pengguna.

Sekarang kita mempunyai skema GraphQL, sudah waktunya untuk membina penyelesai yang sesuai untuk menyelesaikan operasi pertanyaan.

Penyelesai GraphQl

Penyelesai adalah kumpulan fungsi yang membantu menghasilkan tindak balas dari pertanyaan GraphQL. Oleh itu, mari kita tambahkan pemecah baru dalam app.jsfail.

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

Penyelesai harus memadankan skema yang sesuai dengan nama. Oleh itu, di sini usersmerujuk kepada userspertanyaan yang ditentukan dalam skema kami. Ini adalah fungsi yang mengambil data dari API dengan bantuan axiosdan mengembalikan seperti yang diharapkan id, login, dan avatar_url.

Dan operasi itu memerlukan masa untuk diselesaikan. Itulah sebabnya async / tunggu menunggu di sini untuk menanganinya.

Dengan itu, kita sekarang boleh membuat Pelayan Apollo di bahagian seterusnya.

Membuat Pelayan Apollo

Sekiranya anda ingat, dalam app.jsfail, kami telah mengimport ApolloServerdari apollo-serverbungkusan. Ia adalah konstruktor yang menerima objek sebagai hujah. Objek itu mesti mengandungi skema dan penyelesai untuk dapat membuat pelayan.

Oleh itu, mari kita app.jssedikit sebanyak ApolloServer.

• app.js

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

Di sini, kita lulus sebagai parameter objek yang memegang skema dan penyelesai ApolloServeruntuk membuat pelayan dan kemudian mendengarkannya. Dengan adanya itu, kita sekarang mempunyai pelayan berfungsi untuk bekerjasama.

Anda sudah boleh bermain dengannya dan menghantar pertanyaan dengan bantuan taman permainan GraphQL dengan menjalankan perintah ini:

 yarn start 

Anda kini boleh melihatnya //localhost:400

• app.jsFail lengkap

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

Pelayan sahaja tidak banyak melakukan. Kita perlu menambahkan skrip permulaan dalam package.jsonfail untuk, seperti yang anda duga, memulakan pelayan.

• package.json

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

Dengan itu, kami mempunyai pelayan untuk mengambil data dari Github API. Jadi sekarang masanya untuk beralih ke pelanggan dan menggunakan data.

Mari lakukannya.

Membangun Pelanggan dengan React

Perkara pertama yang harus kita lakukan ialah membuat Aplikasi React baru dengan menjalankan perintah berikut di terminal:

npx create-react-app client-react-apollo 

Seterusnya, kita perlu memasang pakej Apollo dan GraphQl:

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

Sekarang, kita boleh menghubungkan Apollo dengan Aplikasi React kita dengan mengemas kini index.jsfail.

Menghubungkan React ke 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 

The useQuerycangkuk disediakan oleh Apollo menerima pertanyaan GraphQL dan mengembalikan tiga keadaan: muatan, kesilapan, dan data.

Sekiranya data berjaya diambil, kami menyebarkannya ke komponen Pengguna. Jika tidak, kami membuat kesilapan.

• App.jsFail lengkap

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 

Hebat! Dengan itu, kami kini selesai membina aplikasi Apollo GraphQL tumpukan penuh menggunakan React dan Node JS.

Pratonton Server Apollo GraphQL di sini

Pratonton Aplikasi React di sini

Cari kod sumber di sini

Anda boleh mendapatkan kandungan hebat seperti ini di blog saya

Terima kasih untuk membaca!