使用 GraphQL 和 React 构建现代 Web 应用的完整指南-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种新兴的 API 查询语言，它允许客户端精确地指定需要从服务器获取的数据，并将多个查询合并为一个请求。React 是一种流行的 JavaScript 库，用于构建用户界面。结合使用 GraphQL 和 React 可以创建出现代 Web 应用，本文将介绍如何使用这两种技术构建 Web 应用的完整指南。

GraphQL 基础知识

定义 GraphQL Schema

GraphQL Schema 定义了数据模型和查询语言。在 GraphQL 中，Schema 由类型定义和查询定义组成。类型定义包括对象类型、枚举类型、输入类型和接口类型。查询定义包括查询类型、变量定义、输入值定义和查询语句。

以下是一个简单的 GraphQL Schema 示例：

// javascriptcn.com 代码示例
type Book {
  id: ID!
  title: String!
  author: String!
  publishedDate: String!
}

type Query {
  book(id: ID!): Book
  books: [Book]
}

input BookInput {
  title: String!
  author: String!
  publishedDate: String!
}

type Mutation {
  createBook(input: BookInput!): Book
  updateBook(id: ID!, input: BookInput!): Book
  deleteBook(id: ID!): Boolean
}

上述 Schema 定义了一个 Book 类型，包括 id、title、author 和 publishedDate 属性。Query 类型定义了两个查询，一个用于获取单个 Book 对象，另一个用于获取所有 Book 对象。Mutation 类型定义了三个操作，用于创建、更新和删除 Book 对象。

查询 GraphQL API

在 GraphQL 中，客户端可以精确地指定需要获取的数据。以下是一个查询的示例：

query {
  books {
    id
    title
    author
  }
}

上述查询将获取所有 Book 对象的 id、title 和 author 属性。客户端可以使用变量来传递参数，以下是一个带参数的查询示例：

query($id: ID!) {
  book(id: $id) {
    id
    title
    author
  }
}

上述查询将获取指定 id 的 Book 对象的 id、title 和 author 属性。

使用 GraphQL 客户端库

GraphQL 客户端库可以帮助客户端发送 GraphQL 查询并处理响应。以下是一些常见的 GraphQL 客户端库：

Apollo Client：一个功能强大的 GraphQL 客户端库，支持 React、Angular、Vue 和原生 JavaScript。
Relay：Facebook 开源的 GraphQL 客户端库，专为 React 应用而设计。
Urql：一个轻量级的 GraphQL 客户端库，支持 React 和原生 JavaScript。

React 基础知识

创建 React 组件

在 React 中，组件是 UI 的构建块。以下是一个简单的 React 组件示例：

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

上述组件接收一个名为 name 的 props，并在页面上显示一条问候语。

使用 React 组件

在 React 中，可以使用 JSX 语法来声明组件。以下是一个使用 Greeting 组件的示例：

import React from 'react';
import Greeting from './Greeting';

function App() {
  return <Greeting name="John" />;
}

export default App;

上述示例将在页面上显示一条问候语，其中 name 属性的值为 John。

状态管理

在 React 中，组件状态可以通过 useState Hook 进行管理。以下是一个使用 useState Hook 的示例：

// javascriptcn.com 代码示例
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

上述示例定义了一个 Counter 组件，其中 count 状态的初始值为 0。当用户点击 Increment 按钮时，count 状态将增加 1。

使用 GraphQL 和 React 构建 Web 应用

使用 Apollo Client

在 React 应用中使用 Apollo Client 可以方便地管理 GraphQL 查询和响应。以下是一个使用 Apollo Client 的示例：

// javascriptcn.com 代码示例
import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
});

const BOOKS_QUERY = gql`
  query {
    books {
      id
      title
      author
    }
  }
`;

function Books() {
  const { loading, error, data } = useQuery(BOOKS_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <ul>
      {data.books.map(book => (
        <li key={book.id}>
          <h2>{book.title}</h2>
          <p>By {book.author}</p>
        </li>
      ))}
    </ul>
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <Books />
    </ApolloProvider>
  );
}

export default App;

上述示例使用 Apollo Client 发送 BOOKS_QUERY 查询，并在页面上显示所有 Book 对象的标题和作者。

使用 Relay

使用 Relay 可以更方便地管理 GraphQL 查询和响应，并提供更好的性能和可维护性。以下是一个使用 Relay 的示例：

// javascriptcn.com 代码示例
import React from 'react';
import { RelayEnvironmentProvider, usePreloadedQuery, graphql } from 'react-relay/hooks';
import { createEnvironment } from './relayEnvironment';

const BOOKS_QUERY = graphql`
  query AppQuery {
    books {
      id
      title
      author
    }
  }
`;

function Books(props) {
  const data = usePreloadedQuery(BOOKS_QUERY, props.preparedData);

  return (
    <ul>
      {data.books.map(book => (
        <li key={book.id}>
          <h2>{book.title}</h2>
          <p>By {book.author}</p>
        </li>
      ))}
    </ul>
  );
}

function App() {
  const environment = createEnvironment();
  const preparedData = environment.prepare(BOOKS_QUERY, {});

  return (
    <RelayEnvironmentProvider environment={environment}>
      <Books preparedData={preparedData} />
    </RelayEnvironmentProvider>
  );
}

export default App;

上述示例使用 Relay 发送 BOOKS_QUERY 查询，并在页面上显示所有 Book 对象的标题和作者。

总结

本文介绍了如何使用 GraphQL 和 React 构建现代 Web 应用的完整指南。首先介绍了 GraphQL 的基础知识，包括 Schema 定义和查询语言。然后介绍了 React 的基础知识，包括组件创建和状态管理。最后介绍了如何使用 Apollo Client 和 Relay 在 React 应用中管理 GraphQL 查询和响应。希望本文能够对读者学习和使用 GraphQL 和 React 有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65692f6ad2f5e1655d1bc3e0