Apollo学习-useQuery学习

一、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中获取的所有数据的完整列表。