在 Gatsby 中安装 Apollo 客户端

要在 Gatsby 中使用 Apollo 客户端，您需要先安装以下软件包：

• @apollo/client
• gatsby-plugin-apollo

步骤 1：安装软件包

在项目的根目录下，运行以下命令来安装这些软件包：

npm install @apollo/client gatsby-plugin-apollo

步骤 2：创建配置文件

在项目的根目录下，创建一个名为 gatsby-config.js 的文件，并添加以下内容：

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-apollo",
      options: {
        uri: "<API endpoint URI>",
      },
    },
  ],
};

在上面的代码中，将 <API endpoint URI> 替换为您的 Apollo 服务器的 API 端点 URI。

步骤 3：使用 Apollo 客户端

要在 Gatsby 中使用 Apollo 客户端，请按照以下步骤操作：

1. 导入 @apollo/client 中的必要组件，例如 ApolloClient、InMemoryCache 和 createHttpLink。
2. 创建一个 ApolloClient 实例，并将其与 gatsby-plugin-apollo 插件一起使用。
3. 在组件中使用 useQuery、useMutation 等函数来查询和更新数据。

以下是一个示例组件，该组件使用 Apollo 客户端查询数据：

import React from "react";
import { useQuery, gql } from "@apollo/client";

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

const Users = () => {
  const { loading, error, data } = useQuery(GET_USERS);

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

  return (
    <ul>
      {data.users.map((user) => (
        <li key={user.id}>
          <strong>{user.name}</strong> ({user.email})
        </li>
      ))}
    </ul>
  );
};

export default Users;

结论

使用 Apollo 客户端和 Gatsby，您可以轻松获取和更新数据。只需遵循上面的步骤，您就可以开始构建功能强大的应用程序了。