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