一、useQuery勾子
useQuery是一个 React hook，它允许你在 React 组件中轻松地获取和使用 GraphQL 查询的数据。
二、useQuery勾子的用法
1、引入useQuery
//从@apollo/client包中引入useQuery勾子
import { useQuery } from '@apollo/client';2、定义GraphQL查询
使用 GraphQL 语言编写你的查询。你可以将其定义为一个字符串常量，或者使用 gql 模板标签。
const GET_USERS = gql`
query getUsers {
users {
id
name
}
}
`;3、使用useQuery
在组件中调用 useQuery，传入你的查询。useQuery 会返回一个包含查询状态的对象。
const { loading, error, data } = useQuery(GET_USERS);4、useQuery的可选参数
useQuery 还接受一些可选参数，如 variables、fetchPolicy 等，以控制查询的行为。
useQuery(GET_USERS, {
variables: { limit: 10 },
fetchPolicy: 'cache-and-network',
});三、具体使用
1、创建Apollo客户端
//在应用程序中创建Apollo客户端，并导出默认值。
// 运行前请先启动GraphQL服务，并确保服务地址正确。
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { gql } from 'apollo-boost';
// HTTP连接
const link = new HttpLink({
uri: 'http://localhost:4000/graphql',
});
//内存缓存
const cache = new InMemoryCache();
// Apollo客户端
const client = new ApolloClient({
link: link,
// 传入缓存
cache: cache,
});
// 导出默认值
export default client;2、创建查询
const query = gql`
{
// 这里可以写查询语句
}
`;3、定义查询方法
// 定义查询方法
const useQuery = () => {
const { loading, error, data } = client.query({
query: query,
});
return { loading, error, data };
};
四、
useQuery hook可以说是执行GraphQL查询的最方便的方法
它在函数组件的开头（想其他钩子一样）被调用，并作为第一个必须的参数接收——用gql解析查询
当您使用组件时具有应立即执行的查询时最好使用它，例如用户希望在页面加载时立即查看的数据列表
useQuery返回一个对象，我们可以从中轻松地结构所需的值。执行查询后，需要在其中获取数据的每个组件中使用三个主要值。他们是loading , error , 和data
const GET_POSTS = gql`
query GetPosts($limit: Int) {
posts(limit: $limit) {
id
body
title
createdAt
}
}
`;
function App() {
const { loading, error, data } = useQuery(GET_POSTS, {
variables: { limit: 5 },
});
if (loading) return <div>Loading...</div>;
if (error) return <div>Error!</div>;
return data.posts.map((post) => <Post key={post.id} post={post} />);
}
在显示正在获取的数据之前，我们需要在加载时进行处理(当loading设置为true时)，并且我们尝试获取数据
届时，我们将显示一个带有文本“Loading”的div或一个加载中的图标。我们还需要处理在获取查询时出错的可能性，例如是否存在网络错误或编写查询时出错（语法错误）
一旦完成加载并且没有错误，我们就可以在组件中使用我们的数据，通常将其显示给我们的用户（如上例所示）
我们还可以从useQuery返回的对象中解构出其他值，但是实际上在执行useQuery每个组件中都需要loading , error , 和data。您可以在此处看到我们可以从useQuery中获取的所有数据的完整列表。
