使用React和GraphQL進行CRUD：完整教程與示例

作者：Slagga 2024-06-11 00:00:01

開發前端

在本教程中，我們展示了如何使用React和GraphQL進行CRUD操作。我們設置了GraphQL服務器，連接到MySQL數據庫，定義了查詢和變更，并使用Apollo客戶端在React應用中執行CRUD操作。

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

什么是React？

React是一個用于構建用戶界面的JavaScript庫。它旨在幫助構建應用程序的前端部分，包括處理Web和移動應用的視圖層。

React是基于組件的，這意味著React應用程序的各個部分被分解成較小的組件，然后在更高級別的組件中組織。這些更高級別的組件定義了應用程序的最終結構。

React支持可重用組件，因此您可以創建一個組件，并在應用程序的不同部分多次使用。這有助于減少冗余代碼，使代碼更易于維護，遵循DRY原則。

什么是GraphQL？

GraphQL是一種用于API的查詢語言，也是一個用現有數據來實現查詢的運行時。簡單來說，GraphQL是一種描述如何請求數據的語法。它通常用于從服務器加載數據到客戶端。

GraphQL通過將所有請求抽象到一個端點來簡化API的構建。與傳統的REST API不同，它是聲明式的，這意味著請求的內容會被返回。

何時使用GraphQL

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

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

另一方面，假設我們有一個依賴多個數據源（如MongoDB、MySQL、Postgres和其他API）的完整產品。在這種情況下，我們應該使用GraphQL。

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

一旦我們有了解決函數來將正確的數據分發到前端，我們將能夠輕松地在單一來源中管理數據。

什么是CRUD？

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

RESTful API通常使用HTTP請求。在REST環境中，四個最常見的HTTP方法是GET、POST、PUT和DELETE，這是開發者可以用來創建CRUD系統的方法。

使用graphql-server進行CRUD

在本節中，我們將介紹一些GraphQL CRUD示例，以幫助您了解在React和GraphQL應用程序中CRUD操作的工作方式。

設置服務器

我們將使用express-graphql啟動一個簡單的GraphQL服務器，并將其連接到MySQL數據庫。源代碼和MySQL文件在這個倉庫中。

GraphQL服務器是基于模式和解析器構建的。首先，我們構建一個模式（定義類型、查詢、變更和訂閱）。該模式描述了整個應用程序結構。

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

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

除了模式和根解析器外，我們還啟用了GraphiQL開發工具。GraphiQL是一個交互式的瀏覽器內GraphQL IDE，可以幫助我們玩轉構建的GraphQL查詢。

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”作為響應。

連接數據庫

我要建立與MySQL數據庫的連接，如下所示：

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倉庫中。

使用GraphQL讀取和寫入數據

我們使用查詢和變更來讀取和修改數據源中的數據。在這個例子中，我定義了一個通用的queryDB函數來幫助查詢數據庫。

查詢

所有的SELECT語句（或讀取操作）用于列出和查看數據，放入type Query類型定義中。我們在這里定義了兩個查詢：一個用于列出數據庫中的所有用戶，另一個用于按ID查看單個用戶。

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

圖片

現在我們已經組合了查詢來獲取所有記錄并按ID查看記錄，當我們嘗試從GraphiQL查詢用戶時，它將在屏幕上列出一個用戶數組！

查詢

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

變更

在變更部分中，我們將執行以下操作：創建、更新和刪除記錄。變更按類型定義，對應于數據庫中用戶模式的對象類型。

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從數據庫中刪除記錄。

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設計的。

設置Apollo客戶端

首先，確保安裝了以下包：

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

初始化Apollo客戶端并為應用程序提供客戶端對象：

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鉤子來執行查詢并返回結果。

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鉤子來執行變更并返回結果。

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變更并返回結果。

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的集成。

責任編輯：武曉燕來源：技術的游戲

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看