Apollo GraphQL: วิธีสร้างแอพแบบ Full-stack ด้วย React และ Node Js

Apollo Client เป็นไลบรารีการจัดการสถานะที่สมบูรณ์สำหรับแอป JavaScript เป็นเครื่องมือที่มีประสิทธิภาพเนื่องจากสามารถใช้งานได้ทั้งด้านหลังและส่วนหน้า

ในบทช่วยสอนนี้เราจะใช้มันที่ส่วนหน้าและส่วนหลังโดยการสร้างเซิร์ฟเวอร์ Apollo GraphQL ด้วย Node JS จากนั้นเราจะใช้ข้อมูลในฝั่งไคลเอ็นต์โดยใช้ React JS

หากคุณเพิ่งเริ่มใช้ GraphQl บทช่วยสอนนี้อาจช่วยคุณได้ มิฉะนั้นมาเริ่มกันเลย

  • การสร้างเซิร์ฟเวอร์ด้วย Apollo, Node และ GraphQl
  • สคีมา GraphQl
  • ตัวแก้ไข GraphQl
  • การสร้างเซิร์ฟเวอร์ Apollo
  • การสร้างฝั่งไคลเอ็นต์ด้วย React
  • กำลังเชื่อมต่อ React กับ Apollo
  • กำลังดึงข้อมูล
  • กำลังแสดงข้อมูล

การสร้างเซิร์ฟเวอร์ด้วย Apollo, Node และ GraphQl

ในคู่มือนี้ฉันจะใช้ Github API เพื่อแสดงข้อมูลและการดำเนินการนั้นจะทำโดยเซิร์ฟเวอร์ GraphQl ที่สร้างด้วย Apollo และ Node JS

เพื่อให้สิ่งนี้เกิดขึ้นเราต้องเรียกใช้คำสั่งต่อไปนี้บนเทอร์มินัลเพื่อตั้งค่าโปรเจ็กต์ Node JS ใหม่:

 yarn init 

เมื่อการตั้งค่าเสร็จสิ้นตอนนี้เราสามารถติดตั้งแพ็คเกจที่จำเป็นได้โดยเรียกใช้คำสั่งนี้:

 yarn add apollo-server graphql axios 

เยี่ยมมากตอนนี้เรามีทุกอย่างที่จำเป็นในการสร้างเซิร์ฟเวอร์ ก่อนอื่นให้สร้างไฟล์ใหม่app.jsในรูทซึ่งจะเป็นจุดเริ่มต้นของเซิร์ฟเวอร์ของเรา

ต่อไปเราต้องกำหนดสคีมา 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 เราแค่ต้องการ id ที่จะใช้เป็นคีย์อ้างอิงบน React App ล็อกอินและ avatar_url นอกจากนี้เรายังมีข้อความค้นหาusersที่ส่งกลับอาร์เรย์ของผู้ใช้

ตอนนี้เรามีสคีมา GraphQL แล้วก็ถึงเวลาสร้างตัวแก้ไขที่เกี่ยวข้องเพื่อดำเนินการสืบค้นให้เสร็จสมบูรณ์

ตัวแก้ไข GraphQl

ตัวแก้ไขคือชุดของฟังก์ชันที่ช่วยสร้างการตอบสนองจากแบบสอบถาม 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และส่งกลับตามที่คาดไว้ id ล็อกอินและ avatar_url

และการดำเนินการดังกล่าวอาจใช้เวลานานกว่าจะเสร็จสมบูรณ์ นั่นเป็นเหตุผลที่ใช้ async / await ที่นี่เพื่อจัดการกับมัน

ด้วยเหตุนี้เราจึงสามารถสร้าง Apollo Server ได้ในส่วนถัดไป

การสร้างเซิร์ฟเวอร์ Apollo

หากคุณจำได้ในapp.jsไฟล์เราได้นำเข้าApolloServerจากapollo-serverแพ็คเกจ เป็นตัวสร้างที่รับวัตถุเป็นอาร์กิวเมนต์ และอ็อบเจ็กต์นั้นต้องมีสคีมาและตัวแก้ไขเพื่อให้สามารถสร้างเซิร์ฟเวอร์ได้

ดังนั้นขอปรับแต่งเล็กน้อยด้วยapp.jsApolloServer

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

ที่นี่เราส่งผ่านเป็นพารามิเตอร์วัตถุที่เก็บสคีมาและตัวแก้ไขApolloServerเพื่อสร้างเซิร์ฟเวอร์จากนั้นฟังมัน ด้วยเหตุนี้เราจึงมีเซิร์ฟเวอร์ที่สามารถใช้งานได้

คุณสามารถเล่นได้แล้วและส่งแบบสอบถามด้วยความช่วยเหลือของ GraphQL playground โดยเรียกใช้คำสั่งนี้:

 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 App ใหม่โดยรันคำสั่งต่อไปนี้ในเทอร์มินัล:

npx create-react-app client-react-apollo 

ต่อไปเราต้องติดตั้งแพ็คเกจ Apollo และ GraphQl:

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

ตอนนี้เราสามารถเชื่อมต่อ Apollo กับ React App ของเราได้โดยการอัปเดตindex.jsไฟล์

กำลังเชื่อมต่อ React กับ 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

useQueryเบ็ดให้โดยอพอลโลได้รับแบบสอบถาม 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 แบบเต็มสแต็กโดยใช้ React และ Node JS

ดูตัวอย่างเซิร์ฟเวอร์ Apollo GraphQL ที่นี่

ดูตัวอย่าง React App ที่นี่

ค้นหาซอร์สโค้ดที่นี่

คุณสามารถค้นหาเนื้อหาดีๆแบบนี้ได้ในบล็อกของฉัน

ขอบคุณที่อ่าน!

ยินดีด้วย