未定义：当我在 Next.js 中从 graphql 获取数据时

Question

我是 Next.js 从 graphql 获取数据的新手。当我给了我 undefined。它在操场上运行良好，但在 next.js.

上出现问题

这是 graphql API

https://shoplly-api.techawks.io/graphql

这是显示类别数据的代码Hero.js。

import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
const Hero = ({ categories }) => {
  console.log(categories);
  return (
    <div>
      <div className="flex space-x-4 justify-center items-center">
        <div>Products</div>
        <div>Contact us</div>
        <div>About us</div>
        <div>Contact us</div>
        <div>About us</div>
      </div>
    </div>
  );
};

export default Hero;

export async function getStaticProps() {
  const client = new ApolloClient({
    uri: "https://shoplly-api.techawks.io/graphql",
    cache: new InMemoryCache(),
  });
  const { data } = await client.query({
    query: gql`
      query {
        categories {
          name
        }
      }
    `,
  });
  console.log(categories);
  return {
    props: {
      categories: data.categories,
    },
  };
}

当我控制台记录 categories 对象时 returns 未定义？在这种情况下我实际上错过了什么？

谢谢

Answer 1

在 getStaticProps 中，您永远不会只定义 categories。尝试使用 data.categories

Answer 2

正如 Radosvet 提到的那样，categories 没有在 getStaticProps 中定义，因此那里将是未定义的。

在Next.js中，getStaticProps仅从页面组件调用。因此，如果您在另一个页面中使用 <Hero /> 作为常规 React 组件，则不会调用 getStaticProps，并且不会将任何道具传递给 Hero。尝试使用 Hero.js 作为页面，这意味着它应该在项目的 pages 目录中并转到 localhost:3000/hero，或者在使用该组件的任何页面中定义 getStaticProps ，并将页面中的道具传递给 Hero。像这样：

import Hero from "../components/hero";
import { ApolloClient, InMemoryCache, gql } from "@apollo/client";

export default function Home({ categories }) {
  return <Hero categories={categories} />;
}

export async function getStaticProps() {
  const client = new ApolloClient({
    uri: "https://shoplly-api.techawks.io/graphql",
    cache: new InMemoryCache(),
  });
  const { data } = await client.query({
    query: gql`
      query {
        categories {
          name
        }
      }
    `,
  });
  return {
    props: {
      categories: data.categories,
    },
  };
}

未定义：当我在 Next.js 中从 graphql 获取数据时

Undefined: When I fetch data from graphql in Next.js

reactjs

graphql

next.js