你如何动态控制反应apollo-client查询启动?

时间:2016-10-28 01:53:30

标签: react-apollo

包含apollo-client查询的反应组件将自动启动对服务器的数据调用。

我想仅针对特定用户输入发出数据请求。

You can pass the skip option in the query options - 但这意味着refetch()函数不作为组件的prop提供;并且似乎不会在道具更新中动态评估skip的值。

我的用法是一个地图组件。我只希望在用户按下按钮时加载标记数据,而不是在初始组件安装或位置更改时加载。

下面的代码示例:

// GraphQL wrapping
Explore = graphql(RoutesWithinQuery, {
  options: ({ displayedMapRegion }) => ({
    variables: {
      scope: 'WITHIN',
      targetRegion: mapRegionToGeoRegionInputType(displayedMapRegion)
    },
    skip: ({ targetResource, searchIsAllowedForMapArea }) => {
      const skip = Boolean(!searchIsAllowedForMapArea || targetResource != 'ROUTE');
      return skip;
    },
  }),
  props: ({ ownProps, data: { loading, viewer, refetch }}) => ({
    routes: viewer && viewer.routes ? viewer.routes : [],
    refetch,
    loading
  })
})(Explore);

2 个答案:

答案 0 :(得分:4)

要根据受道具变更影响的条件加入HoC,您可以使用branch中的recompose

branch(
  test: (props: Object) => boolean,
  left: HigherOrderComponent,
  right: ?HigherOrderComponent
): HigherOrderComponent

检查:https://github.com/acdlite/recompose/blob/master/docs/API.md#branch

对于这个具体的例子,看起来像:

const enhance = compose(
  branch(

    // evaluate condition

    ({ targetResource, searchIsAllowedForMapArea }) =>
      Boolean(!searchIsAllowedForMapArea || targetResource != 'ROUTE'),

    // HoC if condition is true

    graphql(RoutesWithinQuery, {
      options: ({ displayedMapRegion }) => ({
        variables: {
          scope: 'WITHIN',
          targetRegion: mapRegionToGeoRegionInputType(displayedMapRegion)
        },
      }),
      props: ({ ownProps, data: { loading, viewer, refetch } }) => ({
        routes: viewer && viewer.routes ? viewer.routes : [],
        refetch,
        loading
      })
    })
  )
);

Explore = enhance(Explore);

答案 1 :(得分:1)

我有一个类似的用例,我只想在用户点击时加载数据。

我没有尝试by pencilcheck above给出的withQuery建议。但我在其他地方看到了同样的建议。我会尝试一下,但与此同时,我的工作方式是based off a discussion on github

./loadQuery.js

注意:我使用了skip指令:

const LOAD = `
query Load($ids:[String], $skip: Boolean = false) {
  things(ids: $ids) @skip(if: $skip) {
     title
  }
`

LoadMoreButtonWithQuery.js

这里我使用withState高阶函数添加一个标志和一个标志设置器来控制skip

import { graphql, compose } from 'react-apollo';
import { withState } from 'recompose';
import LoadMoreButton from './LoadMoreButton';
import LOAD from './loadQuery';

export default compose(
    withState('isSkipRequest', 'setSkipRequest', true),
    graphql(
      gql(LOAD),
      {
        name: 'handleLoad',
        options: ({ids, isSkipRequest}) => ({
          variables: {
            ids,
            skip: isSkipRequest
          },
        })
      }
    ),
)(Button);

./LoadMoreButton.js

在这里,我必须手动"翻转"使用withState添加标志:

export default props => (
    <Button onClick={
        () => {
            props.setSkipRequest(false); // setter added by withState
            props.handleLoad.refetch();
        }
     }>+</Button>
);

坦率地说,我对此有点不满意,因为它引入了一组新的布线(由&#34; withState&#34组成)。它也没有经过测试 - 我刚刚开始工作,我来到StackOverflow来检查更好的解决方案。

豫ICP备18024241号-1