javascript – React-Apollo,不要对组件加载运行查询

我正在使用令人敬畏的 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);

这个设置很好,但有一些问题.

>我最终会遇到总是运行两次的查询,因为我需要将props传递给apollo refetch进行查询.我还必须传入一些虚拟数据(也称为“_”)以防止无用的数据获取.
>我最终不得不在componentWillReceiveProps中进行一些花哨的检查,以防止多次加载查询.

>我无法在查询中使用skip选项,因为这会阻止传入重新获取功能.

我没有将HOC全部放在一起并直接通过apollo手动运行查询,我该如何解决？

解决方法

如果您将组件的props用作重新调用中使用的变量,实际上有一种更简洁的方法. options属性实际上可以是一个获取组件道具的函数.这使您可以从传递给组件的props中派生变量.它看起来像这样：

const mainQueryOptions = {
  options: ({ userId,communityId }) => ({
    variables: { userId,communityId },});

原文链接：https://www.f2er.com/js/155424.html

javascript – React-Apollo,不要对组件加载运行查询

解决方法

猜你在找的JavaScript相关文章