React-Apollo，不要在组件加载时运行查询

IT技术 javascript reactjs graphql apollo
2021-05-24 23:19:57

我正在使用很棒的https://github.com/apollographql/react-apollo库，我想看看是否有比我现在做的更好的约定将数据加载到组件中。

我已经将我的组件设置为使用 apollo HOC 将数据加载到我的组件中，如下所示：

const mainQuery = gql`
  query currentProfileData($userId:String, $communityId:String!){
    created: communities(id:$communityId) {
      opportunities{
          submittedDate
          approvalDate
          status
          opportunity{
            id
          }
      }
    }
  }
`;
const mainQueryOptions = {
  options: {
    variables: { userId: '_', communityId: '_' },
  },
};

const ComponentWithData = compose(
  graphql(mainQuery, mainQueryOptions),
)(Component);

这种设置效果很好，但有一些问题。

  1. 我最终得到的查询总是运行两次，因为我需要将 props 传递给 apollo refetch 以进行查询。我还必须传入一些虚拟数据（也称为“_”）以防止获取无用的数据。

  2. 我最终不得不在 componentWillReceiveProps 中做一些花哨的检查以防止多次加载查询。

    • 我不能在查询中使用跳过选项，因为这会阻止传入重新获取函数。

如果我完全避开 HOC 并直接通过 apollo 手动运行查询，我该如何解决这个问题？

2个回答

只是一点点跟进。

凭借@daniel 的洞察力，我能够解决我的 2 个主要问题，使用 props 运行查询，并有条件地跳过查询直到它准备好。我只是想发布我的最终代码结果。由于您可以为这两个选项设置功能，因此很有帮助。

const mainQueryOptions = {
  skip: ({ community: { id: communityId } }) => !communityId,
  options: ({ community: { id: communityId }, user: { id: userId = '_' } }) => ({
    variables: { userId, communityId },
  }),
};

您可以在 apollo api 页面上找到更多信息：http : //dev.apollodata.com/react/api-graphql.html#graphql

如果您将组件的 props 用作refetch调用中使用的变量，则实际上有一种更简洁的方法。该options属性实际上可以是一个函数，它接受你的组件的 props。这使您可以从传递给组件的 props 派生变量。它看起来像这样：

const mainQueryOptions = {
  options: ({ userId, communityId }) => ({
    variables: { userId, communityId },
  },
});
其它你可能感兴趣的问题
上一篇TPU 长丝用于牙科应用？ 下一篇使用绝对路径导入react组件