Reactjs 使用graphql片段传递数据

我试图将数据从一个组件传递到另一个组件。我希望我的代码能够工作，因为逻辑对我来说是有意义的，但事实并非如此：（

这是我的密码：

从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>
  );
};

const Image=（{data}）=>{
控制台日志（数据）；
返回(
{data.allThePics.edges.map（edge=>{
;
})}
);
};

它不断给我一个错误，说数据未定义：

未捕获类型错误：无法读取未定义的属性“allThePics”

---

我不知道如何使它工作…帮助：）

您是否尝试过使用

数据和&data.allThePics…

？ 如果这样做有效，那是因为在加载过程中，数据还不存在

您可以尝试的另一种方法是

if（loading）returnnull

在这里可以找到更多的加载示例。

---

好吧，让我们将错误视为问题正文中的文本。已更新！谢谢：）你能解决它吗？