Apollo 查询加载总是错误的答案

【问题标题】：Apollo query loading is always falseApollo 查询加载总是错误的
【发布时间】：2022-01-21 02:35:09
【问题描述】：

我是阿波罗的新手。我正在尝试创建加载微调器。我正在使用class components，但我不能使用钩子。获取class components 数据的唯一方法是通过client.query() 问题是加载状态始终为假。

const client = new ApolloClient({
  uri: '/express',
  cache: new InMemoryCache(),
  defaultOptions: {
    query: {
      fetchPolicy: 'network-only',
      notifyOnNetworkStatusChange: 'true',
    },
  },
})

export const fetchProducts = () => {
  return client
    .query({
      notifyOnNetworkStatusChange: true,
      fetchPolicy: 'network-only',
      query: PRODUCT_QUERY,
    })
    .then((result) => {
      console.log(result.loading + '<-- spinner')
      return result
    })
}

@apollo/client: "^3.5.6" 反应：“^17.0.2”

【问题讨论】：

标签： reactjs graphql apollo

【解决方案1】：

您正在使用 apollo 查询 - 它返回一个带有 .then() 的承诺，这意味着

(result) => {
      console.log(result.loading + '<-- spinner')
      return result
    })

只会在您的查询已解决后调用，这永远不会显示加载为真。如果你真的想监控查询的状态，我可能会这样做：

const { data , loading , error }=client.query({
      notifyOnNetworkStatusChange: true,
      fetchPolicy: 'network-only',
      query: PRODUCT_QUERY,
    })

【讨论】：

是的，可以，但我必须将客户端作为道具传递给我的组件容器（智能组件）有没有办法在不将阿波罗客户端传递给我的组件的情况下做到这一点？
@Pavels 实际上是的，有一种方法：使用 apollo 提供的 useQuery 钩子。 const { loading, error, data } = useQuery(yourQuery)