关注留言点赞，带你了解最流行的软件开发知识与最新科技行业趋势。
您是否希望构建具有可扩展、数据驱动的用户界面的现代 Web 应用程序？那么这篇文章适合你。在本分步指南中，我将引导您完成在 React 应用程序中使用 Apollo Client 从 GraphQL 端点获取数据所需的步骤，以及如何处理在此过程中可能发生的错误。
介绍
如果您不熟悉这些术语：
GraphQL是一种强大的 API（应用程序编程接口）查询语言，由 Facebook 开发。它为构建现代 Web 应用程序提供了一种比 REST API（具象状态传输应用程序编程接口）更高效、更强大、更灵活的替代方案。使用 GraphQL，客户端无需从服务器请求预定义的数据结构，而是可以准确指定他们需要的数据并接收与其请求匹配的 JSON（JavaScript 对象表示法）对象。这意味着您可以只检索所需的数据，从而减少网络流量并提高性能。请参阅文档
Apollo Client是一个 JavaScript 库，它提供了一种从客户端应用程序与 GraphQL API 交互的方法。它允许您从 GraphQL 服务器获取数据，将其缓存在本地，并在您的应用程序中管理其状态。它提供了一种简单灵活的方式来使用 GraphQL 查询和修改数据，从而轻松构建强大的、数据驱动的用户界面。请参阅文档
先决条件
您需要具备 React 和 JavaScript 的一些基本知识。
设置环境
在我们开始之前，让我们确保我们已经安装了必要的工具和库。我们将使用 create-react-app 来创建一个新的 React 项目，并使用 Apollo Client 来查询我们的 GraphQL 端点。
npx create-react-app my-app
cd my-app
npm install @apollo/client graphql
定义 GraphQL 端点
要从 GraphQL API 获取数据，我们需要定义我们将向其发出请求的端点。对于此示例，我们将使用以下端点：
https://countries.trevorblades.com/graphql
设置阿波罗客户端
接下来，我们将在 index.js 文件中设置 Apollo Client，并使用 Apollo Provider 包装我们的 App 组件。我们的 index.js 文件应该是这样的：
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://countries.trevorblades.com/graphql',
cache: new InMemoryCache(),
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
此代码创建一个新的 ApolloClient 实例，并将 URI 设置为我们的 GraphQL 端点。它将我们的应用程序包装在 ApolloProvider 中，将客户端对象作为道具传递。您可能想知道为什么是“uri”（统一资源标识符）而不是“url”（统一资源定位器），这是因为在 Apollo Client 的上下文中，“uri”指的是客户端将连接到的 GraphQL 服务器的位置为了获取数据。这可能是因为 URI 不仅包括服务器的位置，还包括其他详细信息，例如协议和任何查询参数，而 URL 专门指资源的位置。
创建查询组件
现在我们已经设置了 GraphQL 端点和 Apollo Client，我们现在可以从 API 获取数据。在我们的 App.js 文件中粘贴以下代码：
import { useQuery, gql } from '@apollo/client';
const GET_LOCATIONS = gql`
query GetLocations {
country(code: "BR") { //Add your query here
name
native
capital
emoji
currency
languages {
code
name
const App = () => {
const { loading, error, data } = useQuery(GET_LOCATIONS);
const {name, currency, capital, native, emoji, languages} = data?.country || {};
if (loading) return
Loading...
if (error) return
Error: {error.message}
return (
Let's Know Our Countries
Country: {name}
About this location:
- Capital is known as {capital}
- Its symbol is {emoji}
- Its native is {native}
- Currency: {currency}
{languages?.map((lang) => (- Language: {lang.name}
- Code: {lang.code}
export default App;
此代码使用 Apollo Client 中的 useQuery 挂钩将 GraphQL 查询作为其参数并返回一个包含该查询的数据、加载和错误状态的对象。在这种情况下，查询是使用 gql 模板文字函数定义的，并分配给一个名为 GET_LOCATIONS 的变量。
然后，App 组件以 GET_LOCATIONS 作为参数调用 useQuery，并解构生成的加载、错误和数据状态。数据状态被进一步解构，以从 GraphQL 响应中获取名称、货币、资本、本地、表情符号和语言字段。它还处理加载和错误状态，并在加载数据后返回要显示的 UI。
运行应用程序
最后，我们可以运行我们的应用程序来查看代码的结果。在您的终端中运行以下命令：
npm start
这将启动开发服务器并在您的 Web 浏览器中打开一个显示该应用程序的新选项卡。它应该看起来像这样。
呈现的 GraphQl UI
结论
恭喜！在本文中，我们介绍了在 React 应用程序中使用 Apollo Client 从 GraphQL API 获取数据的过程，以及如何处理在此过程中可能发生的错误。有了这些知识，您就可以开始自己构建强大的、数据驱动的用户界面。编码愉快！
热门跟贴