一、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 };
};