React+Hygraph GraphQL CMS电商站WSOD白屏数据渲染问题

问题描述 #

我是React框架新手，正在使用React搭建电商网站，采用Hygraph GraphQL CMS作为内容管理系统。当使用graphcms.request方法获取数据时，页面无任何内容渲染。VS Code与浏览器控制台均未报错，但检查元素时可见<noscript>标签提示“需要启用JavaScript才能运行此应用”，我已确认JavaScript处于启用状态，经了解该问题为白屏死亡（WSOD）。

以下是我的App.js代码：

import { ProductCard } from './ProductCard'

const graphcms = new GraphQLClient('secret');

const QUERY =   gql`
{
  products {
    productName
    productImage {
      url
    }
    productPrice
    slug
  }
}`

  export async function getStaticProps() {
    const {product} = await graphcms.request(QUERY);
    return{
      props:{
        product,
      },
    }
  }

function App({product}) {
  return (
    <div>
      {product?.map((product) => (
        <ProductCard Name={product.productName}/>
      ))}
      <div>Hello</div>
    </div>
  );
}

export default App;

问题分析与修复步骤 #

1. getStaticProps使用错误 #

getStaticProps是Next.js专属的数据获取方法，普通React项目不支持该API。在标准React应用中，需要在组件内部通过useEffect钩子来异步获取数据。

2. 响应数据解构错误 #

查询语句中请求的是复数的products，但解构时写成了单数的{product}，导致product变量为undefined，product?.map不会执行。需要将解构和组件接收的props统一改为products。

3. 缺失必要导入 #

代码中未导入GraphQLClient和gql，需要从graphql-request包中补充导入。

4. 遍历列表缺少key属性 #

React列表遍历需要唯一的key属性，避免渲染警告，这里可以使用product.slug作为唯一标识。

修复后的完整代码 #

import { useEffect, useState } from 'react';
import { ProductCard } from './ProductCard';
import { GraphQLClient, gql } from 'graphql-request';

// 替换为你的Hygraph API端点
const graphcms = new GraphQLClient('你的Hygraph API URL');

const QUERY = gql`
{
  products {
    productName
    productImage {
      url
    }
    productPrice
    slug
  }
}`

function App() {
  const [products, setProducts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const { products } = await graphcms.request(QUERY);
        setProducts(products);
      } catch (error) {
        console.error('数据获取失败:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchProducts();
  }, []);

  // 加载状态提示
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {products.map((product) => (
        <ProductCard key={product.slug} Name={product.productName} />
      ))}
      <div>Hello</div>
    </div>
  );
}

export default App;

额外注意事项 #

• 确保已安装依赖：执行npm install graphql-request graphql或yarn add graphql-request graphql
• 务必将'你的Hygraph API URL'替换为实际的项目API地址，不要保留'secret'
• 若ProductCard组件需要更多数据（如图片、价格），可在map中传递对应的props

内容的提问来源于stack exchange，提问作者TheOdinBorson