如何从服务器返回特定值之前重新获取？ （阵营-阿波罗）

Question

使用React-Apollo，是否可以再次重新获取，直到获取的数据具有特定值？

假设我有一个持续ping服务器的组件，直到服务器回复某个响应。

graphql(gql`
  query {
    ping {
      response
    }
  }
`)(MyComponent)

服务器返回

ping: {
  response: "busy"
}

或

ping: {
  response: "OK"
}

我希望这个组件每隔一秒钟对服务器进行一次ping（轮询），直到响应为＃34; OK＆＃34;。用Apollo做最简单的方法是什么？

Answer 1

基本上您需要做的就是设置一个带有pollInterval选项的查询，当您收到所需的响应时，调用stopPolling函数到达data props 1}}功能。并确保将fetchPolicy设置为与轮询兼容的'network-only'。

了解options.pollInterval here，关于options.fetchPolicy here和the structure of the data prop here。

此代码适用于您：

const PingQuery = gql`
  query {
    ping {
      response
    }
  }
`

graphql(PingQuery, {
    options: {
        fetchPolicy: 'network-only', // we don't want to get the response from the cache
        pollInterval: 1000 // in milliseconds,      
    },
    props: ({data: {loading, ping, stopPolling}) => {
        if (loading) {
            return // still loading, ping is undefined
        }
        if (ping.response === 'busy') {
            // still busy
            return
        }       
        // not busy.. stop polling and do something
        stopPolling()
    }
})(MyComponent)

Answer 2

我可能没有一个完美的答案，但我可能有一些东西指向正确的方向。

如您所知，graphql（）高阶组件采用了第二个选项参数。您可以指定轮询间隔等内容以不断重复查询。

在本文中，他们解释了如何根据特定条件动态更改此轮询间隔。

https://dev-blog.apollodata.com/dynamic-graphql-polling-with-react-and-apollo-client-fb36e390d250

示例使用重构库，但我想你可以做类似这样的事情。

＆＃13;

＆＃13;

import { graphql } from "react-apollo";
import gql from "graphql-tag";
import { compose, withState, lifecycle } from "recompose";

const QUERY = gql`
  query {
    ping {
      response
    }
  }
`;

const withPing = compose(
  withState("polling", "setPolling", true),
  graphql(
    QUERY,
    {
      options: props => {
        if (props.polling === true) {
          return {
            pollInterval: 1000 // Repeat query every 1 second
          };
        } else {
          return { } // or return nothing
        }
      }
    }
  ),
  lifecycle({
    componentWillReceiveProps({
      data: { loading, ping },
      polling,
      setPolling
    }) {
      if (loading) {
        return;
      }

      if (ping.response === 'OK') {
        return setPolling(false) // Stops polling
      } else if (ping.response === 'busy') {
        return setPolling(true) // Continues polling
      }
    }
  })
);

const ComponentWithPing = withPing(Component);

＆＃13;

＆＃13;

＆＃13;

我不知道这是否会有效，但应该很接近。

您可以签出的另一个途径是数据响应对象上的data.refetch（）方法。

https://www.apollographql.com/docs/react/basics/queries.html#graphql-query-data-refetch

祝你好运！

您可以在此处了解有关这些选项的更多信息https://www.apollographql.com/docs/react/basics/queries.html#graphql-query-options，特别是此处的pollInterval https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-pollInterval

Answer 3

您可能要使用Subscriptions。

带有钩子的示例：

useSubscription(
  gql`
    subscription {
      ping {
        response
      }
    }
  `
)

当然，useSubscription钩接受选项的第二个参数，因此您可以这样设置参数：

useSubscription(YOUR_SUBSCRIPTION, { variables: { foo: bar } })