从服务器响应读取数据

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

调试

要调试服务器端，请使用 optional chaining and console.log 直到对象返回 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.

为了使 client-side 代码更健壮，您可以使用 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>
  );
};

从服务器响应读取数据

React reading data form the server

reactjs

graphql

strapi

调试

使用 GraphQL 进行弹性反应