Я новичок в получении данных из graphql в Next.js. Когда я это дает мне undefined
. Он отлично работает на игровой площадке, но возникла проблема с next.js.
Вот API-интерфейс graphql
https://shoplly-api.techawks.io/graphql
Вот код Hero.js для отображения данных категорий.
import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
const Hero = ({ categories }) => {
console.info(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.info(categories);
return {
props: {
categories: data.categories,
},
};
}
Когда я консолью записываю объект categories
, он возвращает undefined? Что я собственно упустил в данном случае?
Спасибо
В getStaticProps
вы никогда не определяете только categories
. Попробуйте использовать data.categories
У вас есть два журнала, один в getStaticProps
, попробуйте console.info(data.categories)
вместо просто console.info(categories)
Ваше предложение мне не подходит. Я хотел использовать данные в разделе компонента Hero. Спасибо за Ваш ответ. Ценить это.
Как упомянул Радосвет, 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,
},
};
}
Подскажите, пожалуйста, куда поставить
data.categories
. Извините, я едва новичок в этом коде? Спасибо за ваш ответ