Apollo Client入门
第1步：设置
要开始本教程，请执行以下操作之一：
- 使用Vite在本地创建一个新的React项目，或者
- 在CodeSandbox上创建一个新的React沙箱。
第2步：安装依赖
使用Apollo Client的应用程序需要两个顶级依赖：
-
@apollo/client：这个单一包含了设置Apollo Client所需的几乎一切。它包括内存缓存、本地状态管理、错误处理，以及基于React的视图层。 -
graphql：此包提供解析GraphQL查询的逻辑。
运行以下命令安装这两个包：
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中导入所需的符号：
// main.jsx
import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client';
接下来我们初始化ApolloClient，向其构造函数传递一个包含uri和cache字段的配置对象：
// 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()：
// 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数据的组件之上。
// 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文件，我们首先用以下代码段替换现有文件内容：
// App.jsx
// 导入使用`useQuery`钩子所需的所有内容
import { useQuery, gql } from '@apollo/client';
export default function App() {
return (
<div>
<h2>My first Apollo app 🚀</h2>
</div>
);
}
我们可以通过用gql模板文字包裹它来定义要执行的查询：
// App.jsx
const GET_LOCATIONS = gql`
query GetLocations {
locations {
id
name
description
photo
}
}
`;
接下来，让我们定义一个名为DisplayLocations的组件，该组件使用useQuery钩子执行我们的GET_LOCATIONS查询：
// 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添加到我们现有的组件树中：
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参考，查看完整的选项列表。