反应读取数据形成服务器

Question

当我将特定数据获取到前端React应用程序中时，我会从Strapi后端数据中遇到错误，当我将数据记录到浏览器控制台中时，我会发现错误，我会在浏览器控制台中看到我的数据。

query GetPromoProducts {
    allStrapiProduct(filter: {promo: {eq: true}}) {
      edges {
        node {
          strapiId
          name
          variants {
            images {
              url
            }
          }
        }
      }
    }
  }
`)


const [selectedSlides, setSelectedSlides] = useState(0)

console.log(data);

var slides =  [];

data.allStrapiProduct.edges.map(({node}) => {
  console.log(node.variants[0].images[0]);
})

Answer 1

调试

要调试服务器端，使用和 console.log.log < /a>要努力到返回null的对象。

基于问题，不确定确切的代码是什么样的。

const myQuery = graphql`
  query GetPromoProducts {
    allStrapiProduct(filter: { promo: { eq: true } }) {
      edges {
        node {
          strapiId
          name
          variants {
            images {
              url
            }
          }
        }
      }
    }
  }
`;

const Component = () => {
  const [selectedSlides, setSelectedSlides] = useState(0);

  console.log(data);

  data.allStrapiProduct.edges.map(({ node }) => {
    // For this case, use optional chaining to work your way up the tree
    console.log(node);
    console.log(node?.variants);
    console.log(node?.variants?.[0]);
    console.log(node?.variants?.[0]?.images);
    console.log(node?.variants?.[0]?.images?.[0]);
  });
};

要停止在这一区域发生：

data.allStrapiProduct.edges.map(({ node }) => {
  if (!node?.variants?.[0]?.images?.length) {
    console.log(node);
    console.log(node?.variants);
    console.log(node?.variants?.[0]);
    console.log(node?.variants?.[0]?.images);
    console.log(node?.variants?.[0]?.images?.[0]);
    throw "Required data missing";
  }
});

可能会键入与GraphQl GraphQl结构化数据的弹性反应

，但是除非需要字段，否则您必须处理null。

要使客户端代码更加健壮，您可以使用 array.prototype.filter（） 跳过没有图像的对象，或 - 如此示例中，使组件处理丢失数据的情况。这完全取决于您希望前端应用程序渲染它。

我尚未测试此代码，因此将其作为“ pseudo-jsx”来演示处理空的GraphQl响应字段。

const ProductVariant = ({ variant }) => {
  if (!variant) return null;

  return (
    <div className="variant">
      {variant?.images?.map?.((image, idx) => (
        <img src={url} key={idx} />
      ))}
    </div>
  );
};

const ProductVariants = ({ variants }) => {
  if (!variants?.length > 0) return null;

  return (
    <div className="variant-list">
      <div>Variants</div>
      <div className="variant-list--items">
        {variants?.map?.((variant, idx) => (
          <ProductVariant variant={variant} key={idx} />
        ))}
      </div>
    </div>
  );
};

const Products = () => {
  const [selectedSlides, setSelectedSlides] = useState(0);

  console.log(data);

  const products = data.allStrapiProduct.edges.map(({ node }) => {
    // Handle as you deem fit
  });

  return (
    <div id="products">
      <p>Here is a list of products</p>
      <div className="products">
        {products?.map?.((product, idx) => {
          return (
            <div className="product" key={idx}>
              {product?.variants?.length > 1 && (
                <ProductVariants variants={variants} />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};