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

使用graphql片段传入数据

1 个答案: