为什么我的graphql返回一个空数组

Question

我是graphql的新手。我有一个前端项目(nextjs(和后端项目(strapi(。

这是我的代码

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
export default function Blog({ posts }) {
console.log('posts', posts)
return (
<div>
{posts.map(post => {
return (
<div>
<p>{posts.heading}</p>
</div>
)
})}
</div>
)
}
export async function getStaticProps() {
const client = new ApolloClient({
url: 'http://localhost:1337/graphql/',
cache: new InMemoryCache(),
})
const { data } = await client.query({
query: gql`
query {
posts {
data {
attributes {
heading
}
}
}
}
`,
})
return {
props: {
posts: data.posts,
},
}
}

除此之外，我还收到了这样一条消息"；不能破坏中间值的属性"；。有人知道为什么吗？我相信代码是正确的。

Answer 1

首先，我建议在根目录中创建一个文件夹，并放入所有的graphql代码，您还会遇到语法错误：让我举一个例子：/index.js

import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
const client = new ApolloClient({
uri: API,
cache: new InMemoryCache(),
defaultOptions: {
query: {
fetchPolicy: "network-only",
},
},
});
//get category ids
const getCatIds = async () => {
try {
const { data } = await client.query({
query: gql`
query categoriesId {
categories(sort: "id:ASC") {
id
name
}
}
`,
});
return data.categories;
} catch {
console.log("error appolo");
}
};
export {getCatIds}