我怎样才能知道ApolloClient中所有查询的全局网络状态？

本文是小编为大家收集整理的关于我怎样才能知道ApolloClient中所有查询的全局网络状态？的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

我正在尝试在NetworkStatus是在飞行中显示预加载器.

我知道每个查询都返回自己的networkstatus，但在我的应用程序中有很多不同的查询.我希望在全球范围内处理所有询问的所有网络服务器.

我想知道我的代码里面是答案:"在网络上有挂起的疑问吗?".

推荐答案

目前，至少没有容易/内置的方法.您可以在 https://github.com/apollographql/apollo-feature - 请求

取决于您想要实现的内容，使用HttpLink上的中间件/后装可能足够，例如:

import { ApolloLink } from 'apollo-link';

const middleware = new ApolloLink((operation, forward) => {
  console.log('Starting', operation);

  return forward(operation);
});

const afterware = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    console.log('Completed', operation);

    return response;
  });
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from([
    middleware,
    afterware,
    new HttpLink({ ... }),
  ]),
});

middleware将在每个请求之前调用，以及之后的afterware.您可以阅读更多关于链接的信息: https://www.apollographqql.com/docs/link/.

或者，看着阿波罗公开揭露的一些API，我能够检查这个"非官方"的方式:

function queriesInFlight() {
  // client is your ApolloClient instance
  const { queryManager } = client;

  return Object.keys(queryManager.queryStore.getStore()).filter(queryId =>
    queryManager.checkInFlight(queryId),
  );
}

本文地址：https://www.itbaoku.cn/post/1938133.html

百度翻译此文有道翻译此文

问题描述

I am trying to show preloader when a networkStatus is in-flight.

I know that every query returns its own networkStatus, but in my application there are so many different queries. I want to have a way of handling all the networkStatus for all the queries, globally.

What I'm wanting to know inside my code is the answer for: "Is there any query pending on the network?".

推荐答案

Currently, there's no way of doing that, at least not easily/built-in. You could request this as a feature on https://github.com/apollographql/apollo-feature-requests.

Depending on what you are wanting to achieve, using a middleware/afterware on your HttpLink could be sufficient, e.g:

import { ApolloLink } from 'apollo-link';

const middleware = new ApolloLink((operation, forward) => {
  console.log('Starting', operation);

  return forward(operation);
});

const afterware = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    console.log('Completed', operation);

    return response;
  });
});

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from([
    middleware,
    afterware,
    new HttpLink({ ... }),
  ]),
});

The middleware will be called before each request, and the afterware, after. You can read more about links at: https://www.apollographql.com/docs/link/.

Alternatively, looking at some of the APIs that Apollo exposes publicly, I was able to make the check on this "unofficial" way:

function queriesInFlight() {
  // client is your ApolloClient instance
  const { queryManager } = client;

  return Object.keys(queryManager.queryStore.getStore()).filter(queryId =>
    queryManager.checkInFlight(queryId),
  );
}

上一篇：如何在一次突变中创建嵌套节点？

下一篇：如何将道具从Redux商店传递到Apollo GraphQL查询中？