在本教程中，我們將向您展示如何使用GraphQL和React實現簡單的端到端CRUD操作。我們將介紹使用React Hooks讀取和修改數據的簡單示例。我們還將演示如何使用Apollo Client實現身份驗證、錯誤處理、緩存和樂觀UI。YLD28資訊網——每日最新資訊28at.com

什么是React？

React是一個用于構建用戶界面的JavaScript庫。它旨在幫助構建應用程序的前端部分，包括處理Web和移動應用的視圖層。YLD28資訊網——每日最新資訊28at.com

React是基于組件的，這意味著React應用程序的各個部分被分解成較小的組件，然后在更高級別的組件中組織。這些更高級別的組件定義了應用程序的最終結構。YLD28資訊網——每日最新資訊28at.com

React支持可重用組件，因此您可以創建一個組件，并在應用程序的不同部分多次使用。這有助于減少冗余代碼，使代碼更易于維護，遵循DRY原則。YLD28資訊網——每日最新資訊28at.com

什么是GraphQL？

GraphQL是一種用于API的查詢語言，也是一個用現有數據來實現查詢的運行時。簡單來說，GraphQL是一種描述如何請求數據的語法。它通常用于從服務器加載數據到客戶端。YLD28資訊網——每日最新資訊28at.com

GraphQL通過將所有請求抽象到一個端點來簡化API的構建。與傳統的REST API不同，它是聲明式的，這意味著請求的內容會被返回。YLD28資訊網——每日最新資訊28at.com

何時使用GraphQL

當然，并不是所有項目都需要GraphQL——它只是一個用于整合數據的工具。GraphQL有定義良好的模式，因此我們可以確定不會過度獲取數據。但是，如果我們已經有一個穩定的RESTful API系統，并且只依賴單一數據源的數據，那么我們不需要GraphQL。YLD28資訊網——每日最新資訊28at.com

例如，假設我們正在為自己創建一個博客，并決定在單一的MongoDB數據庫中存儲、檢索和通信數據。在這種情況下，我們沒有做任何復雜的架構設計，不需要GraphQL。YLD28資訊網——每日最新資訊28at.com

另一方面，假設我們有一個依賴多個數據源（如MongoDB、MySQL、Postgres和其他API）的完整產品。在這種情況下，我們應該使用GraphQL。YLD28資訊網——每日最新資訊28at.com

例如，如果我們在設計一個作品集網站，并希望從社交媒體和GitHub獲取數據（以顯示貢獻），并且我們還有自己的數據庫來維護博客，我們可以使用GraphQL來編寫業務邏輯和模式。它將數據整合為單一的真實來源。YLD28資訊網——每日最新資訊28at.com

一旦我們有了解決函數來將正確的數據分發到前端，我們將能夠輕松地在單一來源中管理數據。YLD28資訊網——每日最新資訊28at.com

什么是CRUD？

在構建API時，您希望您的模型提供四個基本功能：它應該能夠創建、讀取、更新和刪除資源。這一組基本操作通常被稱為CRUD。YLD28資訊網——每日最新資訊28at.com

RESTful API通常使用HTTP請求。在REST環境中，四個最常見的HTTP方法是GET、POST、PUT和DELETE，這是開發者可以用來創建CRUD系統的方法。YLD28資訊網——每日最新資訊28at.com

使用graphql-server進行CRUD

在本節中，我們將介紹一些GraphQL CRUD示例，以幫助您了解在React和GraphQL應用程序中CRUD操作的工作方式。YLD28資訊網——每日最新資訊28at.com

設置服務器

我們將使用express-graphql啟動一個簡單的GraphQL服務器，并將其連接到MySQL數據庫。源代碼和MySQL文件在這個倉庫中。YLD28資訊網——每日最新資訊28at.com

GraphQL服務器是基于模式和解析器構建的。首先，我們構建一個模式（定義類型、查詢、變更和訂閱）。該模式描述了整個應用程序結構。YLD28資訊網——每日最新資訊28at.com

其次，對于模式中定義的內容，我們構建相應的解析器來計算和分發數據。解析器將動作映射到函數；對于在類型定義中聲明的每個查詢，我們創建一個解析器來返回數據。YLD28資訊網——每日最新資訊28at.com

最后，通過定義端點并傳遞配置來完成服務器設置。我們將/graphql初始化為應用程序的端點。對于graphqlHTTP中間件，我們傳遞構建的模式和根解析器。YLD28資訊網——每日最新資訊28at.com

除了模式和根解析器外，我們還啟用了GraphiQL開發工具。GraphiQL是一個交互式的瀏覽器內GraphQL IDE，可以幫助我們玩轉構建的GraphQL查詢。YLD28資訊網——每日最新資訊28at.com

var express = require('express');var graphqlHTTP = require('express-graphql');var { buildSchema } = require('graphql');var schema = buildSchema(`  type Query {    hello: String  }`);var root = {  hello: () => "World"};var app = express();app.use('/graphql', graphqlHTTP({  schema: schema,  rootValue: root,  graphiql: true,}));app.listen(4000);console.log('Running a GraphQL API server at localhost:4000/graphql');

一旦服務器準備就緒，運行node index.js將啟動服務器在http://localhost:4000/graphql。我們可以查詢hello并獲得字符串“World”作為響應。YLD28資訊網——每日最新資訊28at.com

連接數據庫

我要建立與MySQL數據庫的連接，如下所示：YLD28資訊網——每日最新資訊28at.com

var mysql = require('mysql');app.use((req, res, next) => {  req.mysqlDb = mysql.createConnection({    host     : 'localhost',    user     : 'root',    password : '',    database : 'userapp'  });  req.mysqlDb.connect();  next();});

我們可以連接多個數據庫/數據源，并在解析器中整合它們。我在這里連接了一個MySQL數據庫。本文中使用的數據庫轉儲在GitHub倉庫中。YLD28資訊網——每日最新資訊28at.com

使用GraphQL讀取和寫入數據

我們使用查詢和變更來讀取和修改數據源中的數據。在這個例子中，我定義了一個通用的queryDB函數來幫助查詢數據庫。YLD28資訊網——每日最新資訊28at.com

查詢

所有的SELECT語句（或讀取操作）用于列出和查看數據，放入type Query類型定義中。我們在這里定義了兩個查詢：一個用于列出數據庫中的所有用戶，另一個用于按ID查看單個用戶。YLD28資訊網——每日最新資訊28at.com

1. 1. 列出數據：為了列出用戶，我們定義了一個GraphQL模式對象類型User，它表示我們可以從getUsers查詢中獲取或期望的內容。然后我們定義getUsers查詢來返回一個用戶數組。
2. 2. 查看單個記錄：為了查看單個記錄，我們使用getUserInfo查詢定義一個參數id。它查詢數據庫中的特定ID并將數據返回到前端。

圖片YLD28資訊網——每日最新資訊28at.com

現在我們已經組合了查詢來獲取所有記錄并按ID查看記錄，當我們嘗試從GraphiQL查詢用戶時，它將在屏幕上列出一個用戶數組！YLD28資訊網——每日最新資訊28at.com

查詢

var schema = buildSchema(`  type User {    id: String    name: String    job_title: String    email: String  }  type Query {    getUsers: [User],    getUserInfo(id: Int) : User  }`);const queryDB = (req, sql, args) => new Promise((resolve, reject) => {    req.mysqlDb.query(sql, args, (err, rows) => {        if (err)            return reject(err);        rows.changedRows || rows.affectedRows || rows.insertId ? resolve(rows) : resolve(rows[0]);    });});var root = {  getUsers: (args, req) => {    return queryDB(req, `SELECT * FROM user`);  },  getUserInfo: (args, req) => {    return queryDB(req, `SELECT * FROM user WHERE id=?`, [args.id]);  }};app.use('/graphql', graphqlHTTP({  schema: schema,  rootValue: root,  graphiql: true}));

變更

在變更部分中，我們將執行以下操作：創建、更新和刪除記錄。變更按類型定義，對應于數據庫中用戶模式的對象類型。YLD28資訊網——每日最新資訊28at.com

type Mutation {  createUser(name: String!, job_title: String!, email: String!): User  updateUser(id: Int!, name: String, job_title: String, email: String): String  deleteUser(id: Int!): String}

我定義了一個帶有三個參數的createUser變更來將數據插入數據庫中。updateUser使用id標識符來修改表中的用戶記錄，deleteUser使用id從數據庫中刪除記錄。YLD28資訊網——每日最新資訊28at.com

const queryDB = (req, sql, args) => new Promise((resolve, reject) => {  req.mysqlDb.query(sql, args, (err, rows) => {    if (err)      return reject(err);    rows.changedRows || rows.affectedRows || rows.insertId ? resolve(rows) : resolve(rows[0]);  });});const createDB = (req, sql, args) => new Promise((resolve, reject) => {  req.mysqlDb.query(sql, args, (err, rows) => {    if (err)      return reject(err);    args[0].id = rows.insertId;    resolve(args[0]);  });});var root = {  getUsers: (args, req) => {    return queryDB(req, `SELECT * FROM user`);  },  getUserInfo: (args, req) => {    return queryDB(req, `SELECT * FROM user WHERE id=?`, [args.id]);  },  createUser: (args, req) => {    return createDB(req, `INSERT INTO user SET ?`, [args]);  },  updateUser: (args, req) => {    return queryDB(req, `UPDATE user SET ? WHERE id=?`, [args, args.id]).then((res) => "Successfully updated user").catch((err) => "Cannot update user");  },  deleteUser: (args, req) => {    return queryDB(req, `DELETE FROM user WHERE id=?`, [args.id]).then((res) => "Successfully deleted user").catch((err) => "Cannot delete user");  }};app.use('/graphql', graphqlHTTP({  schema: schema,  rootValue: root,  graphiql: true}));

在React中使用graphql-client進行CRUD

這節將使用React與GraphQL客戶端整合。我們將使用Apollo客戶端和GraphQL查詢來從GraphQL API中讀取數據并更新UI。Apollo客戶端的作用類似于瀏覽器的Fetch API，但它是為GraphQL設計的。YLD28資訊網——每日最新資訊28at.com

設置Apollo客戶端

首先，確保安裝了以下包：YLD28資訊網——每日最新資訊28at.com

npm i react-apollo graphql-tag apollo-boost apollo-client apollo-cache-inmemory apollo-link-http

初始化Apollo客戶端并為應用程序提供客戶端對象：YLD28資訊網——每日最新資訊28at.com

import ApolloClient from "apollo-boost";import { ApolloProvider } from "react-apollo";import React from "react";import ReactDOM from "react-dom";import App from "./App";const client = new ApolloClient({  uri: "http://localhost:4000/graphql"});ReactDOM.render(  <ApolloProvider client={client}>    <App />  </ApolloProvider>,  document.getElementById("root"));

列出數據

為了列出數據，我們首先創建一個GraphQL查詢，然后將其傳遞給React組件。我們可以使用useQuery鉤子來執行查詢并返回結果。YLD28資訊網——每日最新資訊28at.com

import React from "react";import gql from "graphql-tag";import { useQuery } from "react-apollo";const GET_USERS = gql`  query {    getUsers {      id      name      job_title      email    }  }`;const UserList = () => {  const { loading, error, data } = useQuery(GET_USERS);  if (loading) return <p>Loading...</p>;  if (error) return <p>Error :(</p>;  return (    <div>      {data.getUsers.map(user => (        <div key={user.id}>          <p>{user.name}</p>          <p>{user.job_title}</p>          <p>{user.email}</p>        </div>      ))}    </div>  );};export default UserList;

創建用戶

為了創建新用戶，我們創建一個變更并將其傳遞給組件。我們可以使用useMutation鉤子來執行變更并返回結果。YLD28資訊網——每日最新資訊28at.com

import React from "react";import gql from "graphql-tag";import { useMutation } from "react-apollo";const CREATE_USER = gql`  mutation CreateUser($name: String!, $job_title: String!, $email: String!) {    createUser(name: $name, job_title: $job_title, email: $email) {      id      name      job_title      email    }  }`;const CreateUser = () => {  let name, job_title, email;  const [createUser] = useMutation(CREATE_USER);  return (    <div>      <form        onSubmit={e => {          e.preventDefault();          createUser({ variables: { name: name.value, job_title: job_title.value, email: email.value } });          name.value = "";          job_title.value = "";          email.value = "";        }}      >        <input ref={node => { name = node; }} placeholder="Name" />        <input ref={node => { job_title = node; }} placeholder="Job Title" />        <input ref={node => { email = node; }} placeholder="Email" />        <button type="submit">Add User</button>      </form>    </div>  );};export default CreateUser;

更新和刪除用戶

類似地，您可以創建更新和刪除用戶的組件。使用useMutation鉤子傳遞GraphQL變更并返回結果。YLD28資訊網——每日最新資訊28at.com

import React from "react";import gql from "graphql-tag";import { useMutation } from "react-apollo";const UPDATE_USER = gql`  mutation UpdateUser($id: Int!, $name: String, $job_title: String, $email: String) {    updateUser(id: $id, name: $name, job_title: $job_title, email: $email)  }`;const DELETE_USER = gql`  mutation DeleteUser($id: Int!) {    deleteUser(id: $id)  }`;const UpdateUser = () => {  let id, name, job_title, email;  const [updateUser] = useMutation(UPDATE_USER);  return (    <div>      <form        onSubmit={e => {          e.preventDefault();          updateUser({ variables: { id: parseInt(id.value), name: name.value, job_title: job_title.value, email: email.value } });          id.value = "";          name.value = "";          job_title.value = "";          email.value = "";        }}      >        <input ref={node => { id = node; }} placeholder="ID" />        <input ref={node => { name = node; }} placeholder="Name" />        <input ref={node => { job_title = node; }} placeholder="Job Title" />        <input ref={node => { email = node; }} placeholder="Email" />        <button type="submit">Update User</button>      </form>    </div>  );};const DeleteUser = () => {  let id;  const [deleteUser] = useMutation(DELETE_USER);  return (    <div>      <form        onSubmit={e => {          e.preventDefault();          deleteUser({ variables: { id: parseInt(id.value) } });          id.value = "";        }}      >        <input ref={node => { id = node; }} placeholder="ID" />        <button type="submit">Delete User</button>      </form>    </div>  );};export { UpdateUser, DeleteUser };

總結

在本教程中，我們展示了如何使用React和GraphQL進行CRUD操作。我們設置了GraphQL服務器，連接到MySQL數據庫，定義了查詢和變更，并使用Apollo客戶端在React應用中執行CRUD操作。希望這能幫助您更好地理解和實現React和GraphQL的集成。YLD28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-93095-0.html使用React和GraphQL進行CRUD：完整教程與示例

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 為了關閉全局 Input 的自動拼寫校驗！走了好多彎路

下一篇： Feroxbuster：一個用 Rust 編寫的快速、簡單、遞歸內容發現工具