17

apollo-clientクエリでラップされた react コンポーネントは、サーバーへのデータ呼び出しを自動的に開始します。

特定のユーザー入力に対してのみデータのリクエストを開始したいと考えています。

クエリ オプションでスキップ オプションを渡すことができますが、これは refetch() 関数がコンポーネントの小道具として提供されていないことを意味します。また、小道具の更新時にスキップの値が動的に評価されないようです。

私の用途は、マップ コンポーネントです。ユーザーがボタンを押したときにのみマーカーのデータをロードしたいのですが、最初のコンポーネントのマウントや場所の変更ではロードしません。

以下のコードサンプル:

// 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);
4

2 に答える 2

4

props の変更によって影響を受ける条件に基づいて HoC を含めるには、branchfromを使用できます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);
于 2017-08-23T23:38:14.350 に答える