使用graphql片段传入数据

Question

我试图将数据从组件传递到另一个组件。我希望我的代码有效，因为逻辑对我有意义，但它没有:(

这是我的代码：

从components文件夹中的父文件，我写了一个graphql片段：

export const testQuery = graphql`
  fragment testQuery on RootQueryType {
    allThePics {
      edges {
        node {
          testPicture {
            responsiveResolution {
              src
            }
          }
        }
      }
    }
  }
`;

然后从另一个js文件，我这样调用：

export const callingTestQuery = graphql`
  query callingTestQuery {
    ...testQuery
  }
`;

我使用localhost：0000 / ___ graphql检查了这个graphql，看起来它给了我一些数据，这意味着定义了数据。

但是，当我尝试使用数据时，

const Image = ({ data }) => {
  console.log(data);
  return (
    <div>
      {data.allThePics.edges.map(edge => {
        <PictureList node={edge.node} />;
      })}
    </div>
  );
};

它一直给我一个错误，说数据是未定义的：

未捕获的TypeError：无法读取未定义的属性“allThePics”

我不知道如何让它工作......帮助:)

Answer 1

你试过做data && data.allThePics...吗？如果这样做，那是因为在加载过程中，数据还不存在。

你可以尝试的另一种方式是if(loading) return null

可以在此处找到更多加载示例。 https://www.apollographql.com/docs/angular/basics/queries.html#basics