如何使用 React + GraphQL + PWA 开发 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 应用程序的复杂性增加，对于前端开发人员来说，要求也越来越高。而 React、GraphQL 和 PWA 这三个技术则提供了一种理想的解决方案。本文将介绍如何使用这三个技术来构建现代的 Web 应用程序。

什么是 React？

React 是一种 JavaScript 库，用于构建用户界面。React 是由 Facebook 开发，并在 2013 年首次发布。它现在已经成为了许多开发人员和企业的首选。使用 React，您可以创建完全由 JavaScript 控制的动态、快速和高度可定制的用户界面。

React 的设计原则是高效性和可重用性。它使用称为“组件”的小块来组成大块界面。这使得 React 可以轻松地构建复杂的、可组合的用户界面。

什么是 GraphQL？

GraphQL 是一种 API 查询语言，允许客户端指定其所需数据的结构，而不是由服务器定义。GraphQL 的设计目标是让客户端更好地理解查询语句。GraphQL 是由 Facebook 开发的，并于 2015 年首次发布。

GraphQL 的优势在于它提供了一种更灵活、更高效的方式来访问数据。与 REST API 相比，GraphQL 使客户端可以更精确地指定查询，并只返回所需的数据。这意味着您可以减少不必要的数据传输，从而提高应用程序的性能和响应速度。

什么是 PWA？

PWA（Progressive Web Apps）是一种混合应用模型，结合了 Web 应用程序和原生应用程序的优点。PWA 首先在 2015 年被 Google 提出，并于 2018 年得到了更多的支持。

PWA 允许应用程序以类似于应用程序的方式运行，具有原生应用程序的特性，如离线缓存、推送通知、主屏幕添加等。PWA 的目标是让 Web 应用程序可以像本地应用程序一样快速、可靠和安全地运行。

如何使用 React + GraphQL + PWA 开发 Web 应用？

现在，让我们看看如何使用 React、GraphQL 和 PWA 开发 Web 应用程序。

步骤 1：创建 React 应用程序

首先，您需要使用 Create React App 工具创建 React 应用程序。

npx create-react-app my-app
cd my-app

步骤 2：安装和配置 Apollo Client

接下来，您需要安装和配置 Apollo Client，它是用于 GraphQL API 的客户端。Apollo Client 允许您将 GraphQL 查询集成到您的 React 应用程序中。

在终端中运行以下命令以安装 Apollo Client：

npm install @apollo/client graphql

接下来，您需要配置 Apollo Client。打开 src/index.js 文件，并添加以下代码：

import { ApolloClient, InMemoryCache } from '@apollo/client';

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

这将创建一个新的 Apollo Client 对象，并指定 GraphQL API 的 URI。您还需要添加一个高阶组件以将 Apollo Client 与 React 应用程序集成。这可以通过以下代码完成：

import { ApolloProvider } from '@apollo/client';

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

步骤 3：编写 GraphQL 查询

现在，您需要编写一些 GraphQL 查询，以便从服务器获取所需的数据。这些查询将在您的 React 组件中使用。您可以使用 Apollo Client 提供的 useQuery 钩子来执行 GraphQL 查询。

在 src/App.js 中，您可以编写以下代码：

import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql`
  query {
    users {
      id
      name
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_USERS);

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

  return (
    <div>
      {data.users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default App;

该代码将从服务器获取所有用户的 ID 和名称，并在页面上呈现它们。

步骤 4：将应用程序转换为 PWA

现在，您需要将应用程序转换为 PWA。这意味着您需要向应用程序添加一些功能，例如离线缓存、推送通知和主屏幕添加。

首先，您需要安装一个名为 Workbox 的库，它是负责离线缓存的解决方案。在终端中运行以下命令以安装 Workbox：

npm install workbox-webpack-plugin

接下来，您需要创建一个名为 service-worker.js 的文件，该文件将在构建应用程序时创建。您可以使用 Workbox 自动生成此文件。在 src/index.js 文件中添加以下代码：

import * as serviceWorker from './serviceWorker';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { ApolloProvider } from '@apollo/client';
import { Workbox } from 'workbox-window';

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

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/service-worker.js');
  wb.register();
} else {
  console.log('Service workers are not supported.');
}

serviceWorker.unregister();

现在，打开 package.json 文件，并添加以下代码来配置 PWA：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.3.21",
    "graphql": "^15.5.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "workbox-webpack-plugin": "^6.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "workbox": {
    "globDirectory": "build/",
    "globPatterns": [
      "**/*.{css,js,html,json,ico,png,jpg,jpeg,svg,woff2,woff,eot,ttf}"
    ],
    "swDest": "build/service-worker.js",
    "clientsClaim": true,
    "skipWaiting": true
  }
}

该配置将 Workbox 插件添加到 Webpack 配置中，并使用 Workbox 自动生成 service-worker.js 文件。它还针对构建应用程序的目录中的所有内容（例如 HTML、CSS、JavaScript 和图像文件）自动配置缓存。

现在，运行以下命令来构建应用程序并启动服务器：

npm run build
npm install -g serve
serve -s build

您应该现在能够在浏览器中打开应用程序，并以 PWA 模式运行。

总结

React、GraphQL 和 PWA 是三种强大的技术，并可能是构建现代 Web 应用程序的最佳解决方案。本文介绍了如何使用这三种技术来创建一个功能齐全的 Web 应用程序，并为每个技术提供了示例代码。希望这篇文章对您有所帮助，并能够指导您在以后的项目中使用这三个技术进行前端开发。

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

如何使用 React + GraphQL + PWA 开发 Web 应用