graphql：Apollo client入门 (翻译)

Apollo Client入门

第1步：设置

要开始本教程，请执行以下操作之一：

使用Vite在本地创建一个新的React项目，或者
在CodeSandbox上创建一个新的React沙箱。

第2步：安装依赖

使用Apollo Client的应用程序需要两个顶级依赖：

@apollo/client：这个单一包含了设置Apollo Client所需的几乎一切。它包括内存缓存、本地状态管理、错误处理，以及基于React的视图层。
graphql：此包提供解析GraphQL查询的逻辑。

运行以下命令安装这两个包：

css 复制代码

bashCopy code
npm install @apollo/client graphql

如果你在CodeSandbox的React沙箱中遇到TypeError，请尝试在依赖面板中将graphql包的版本降级到15.8.0。如果降级后遇到其他错误，请刷新页面。

我们的示例应用程序将使用Apollo Odyssey的Voyage教程系列中的FlyBy GraphQL API。这个API提供了一系列星际旅行地点及其详细信息 👽

第3步：初始化ApolloClient

安装好依赖后，我们现在可以初始化一个ApolloClient实例。

在main.jsx中，首先从@apollo/client中导入所需的符号：

javascript 复制代码

// main.jsx
import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client';

接下来我们初始化ApolloClient，向其构造函数传递一个包含uri和cache字段的配置对象：

arduino 复制代码

// main.jsx
const client = new ApolloClient({
  uri: 'https://flyby-router-demo.herokuapp.com/',
  cache: new InMemoryCache(),
});

uri指定GraphQL服务器的URL。
cache是InMemoryCache的一个实例，Apollo Client用它来缓存查询结果。

现在我们的客户端已经准备好开始获取数据。但在我们开始在React中使用Apollo Client之前，让我们先尝试使用纯JavaScript发送一个查询。

在同一个main.jsx文件中，用下面的查询字符串（包裹在gql模板文字中）调用client.query()：

javascript 复制代码

// const client = ...

client
  .query({
    query: gql`
      query GetLocations {
        locations {
          id
          name
          description
          photo
        }
      }
    `,
  })
  .then((result) => console.log(result));

运行此代码，打开你的控制台，并检查结果对象。你应该看到一个带有locations的data属性，以及其他一些属性，如loading和networkStatus。很好！

像这样直接执行GraphQL操作可以很有用，但当Apollo Client与像React这样的视图层集成时，它的真正闪光点才会显现。你可以将查询绑定到你的UI上，并在获取新数据时自动更新它。

让我们看看这是如何工作的！

第4步：将你的客户端连接到React

你可以通过ApolloProvider组件将Apollo Client连接到React。类似于React的Context.Provider，ApolloProvider将包裹你的React应用，并将Apollo Client放在上下文中，使你能够在组件树中的任何地方访问它。

在main.jsx中，让我们用ApolloProvider包裹我们的React应用。我们建议将ApolloProvider放在应用程序的高层，即任何可能需要访问GraphQL数据的组件之上。

javascript 复制代码

// main.jsx
import React from 'react';
import * as ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: 'https://flyby-router-demo.herokuapp.com/',
  cache: new InMemoryCache(),
});

// 支持在React 18+中使用
const root = ReactDOM.createRoot(document.getElementById('root'));

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

第5步：使用useQuery获取数据

连接好你的ApolloProvider后，你可以开始使用useQuery请求数据。useQuery钩子是一个React钩子，用于将GraphQL数据共享到你的UI中。

转到我们的App.jsx文件，我们首先用以下代码段替换现有文件内容：

javascript 复制代码

// App.jsx
// 导入使用`useQuery`钩子所需的所有内容
import { useQuery, gql } from '@apollo/client';

export default function App() {
  return (
    <div>
      <h2>My first Apollo app 🚀</h2>
    </div>
  );
}

我们可以通过用gql模板文字包裹它来定义要执行的查询：

go 复制代码

// App.jsx
const GET_LOCATIONS = gql`
  query GetLocations {
    locations {
      id
      name
      description
      photo
    }
  }
`;

接下来，让我们定义一个名为DisplayLocations的组件，该组件使用useQuery钩子执行我们的GET_LOCATIONS查询：

javascript 复制代码

// App.jsx
function DisplayLocations() {
  const { loading, error, data } = useQuery(GET_LOCATIONS);

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

  return data.locations.map(({ id, name, description, photo }) => (
    <div key={id}>
      <h3>{name}</h3>
      <img width="400" height="250" alt="location-reference" src={`${photo}`} />
      <br />
      <b>About this location:</b>
      <p>{description}</p>
      <br />
    </div>
  ));
}

每当这个组件渲染时，useQuery钩子会自动执行我们的查询并返回一个结果对象，其中包含loading、error和data属性：

Apollo Client自动追踪查询的加载和错误状态，这些状态反映在loading和error属性中。
当查询的结果返回时，它会附加到data属性上。

最后，我们将DisplayLocations添加到我们现有的组件树中：

javascript 复制代码

jsxCopy code
// App.jsx
export default function App() {
  return (
    <div>
      <h2>My first Apollo app 🚀</h2>
      <br/>
      <DisplayLocations />
    </div>
  );
}

当你的应用重新加载时，你应该会短暂地看到一个加载指示器，随后是一系列地点及其详情！如果没有，你可以将你的代码与CodeSandbox上的完成后的应用进行比较。

恭喜，你刚刚完成了你的第一个使用Apollo Client从GraphQL获取数据的组件！🎉 现在你可以尝试构建更多使用useQuery的组件，并尝试你刚刚学到的概念。

下一步

现在你已经学会了如何使用Apollo Client获取数据，你可以深入了解创建更复杂的查询和变更。在本节之后，我们推荐继续学习：

查询：学习如何获取带参数的查询，并更深入地了解配置选项。有关完整选项列表，请查看useQuery的API参考。
变更：学习如何使用变更更新数据，以及何时需要更新Apollo缓存。有关完整选项列表，请查看useMutation的API参考。
Apollo Client API：有时，你需要直接访问客户端，就像我们在上面的纯JavaScript示例中所做的那样。请访问API参考，查看完整的选项列表。