Question

编辑：我错过了以下事实：我在其他地方使用getSpotSearchResponse而不传递options对象。下面的示例应该可以使用。

我正在尝试通过使用部分应用的函数传递选项来使graphql查询彼此分离。但是，我遇到以下警告：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

与getSpotSearchResponse.js中声明的查询关联的表示性组件未呈现（按预期）。您将如何规避这个问题？

SpotGridContainer.js

export const SpotGridContainer = compose(
  getSelectedPlace,
  getSpotSearchResponse({
    variables: ({ SelectedPlace }) => ({
      input: {
        center: SelectedPlace 
        // contains the result from GET_SELECTED_PLACE
      }
    })
  }),
)(SpotGrid);

getSelectedPlace.js

SelectedPlace是GET_SELECTED_PLACE查询的结果，并作为prop传递给下一个graphql HOC。

export const getSelectedPlace = graphql(GET_SELECTED_PLACE, {
  props: ({ data: { SelectedPlace } }) => ({ SelectedPlace })
});

getSpotSearchResponse.js

从SpotGridContainer.js传递选项对象，并返回graphql HOC。

export const getSpotSearchResponse = options =>
  graphql(GET_SPOT_SEARCH_RESPONSE, {
    props: ({ data: { spots } }) => ({ spots }),
    options
  });

如何将GraphQL查询与Apollo客户端解耦？

0 个答案: