问题描述
我正在尝试在 getStaticProps 期间使用 Apollo 为 WPGraphQL 查询检索 100 多条记录。出色的 WPGraphQL 制造者 Jason 向我指出使用分页方法，然后将结果组合成一个新的数组（或对象？）。
不过，我遇到的问题是...好吧，我无法将它组合起来，或者除了获得一个查询之外，我无法做任何其他事情。在我的 getStaticProps 中，我有一个查询仅检索 100 条记录并有效，但是如果我尝试添加另一个记录，则它不起作用，并且我收到数据错误，说它不存在（即使我知道它存在） ...）：
Server Error
TypeError: Cannot read property 'campgrounds' of undefined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/camps.js (355:11) @ getStaticProps
353 | });
354 |
> 355 | dataset2.campgrounds.edges.map((city) => {
| ^
356 | return cities.push({
357 | city: city.node.acfDetails.city,358 | });
所以我不确定该怎么做，希望你们能提供帮助。我确定我只是错过了一些愚蠢的事情或做了一些愚蠢的事情。
最终，我试图有效地从数据库中检索 ~156 条记录没有分页，我想最好的方法是将其拆分为两个查询然后合并数据。非常感谢您的帮助。
这是我的 getStaticProps 代码不起作用：
export async function getStaticProps() {
const { data } = await client.query({
query: gql`
query allCamps {
features(first: 300) {
nodes {
label: name
value: name
}
}
regions(first: 300) {
nodes {
id
name
regioncoord {
latitude
longitude
}
}
}
ownerships(first: 300) {
nodes {
id
name
}
}
campgrounds(first: 200) {
pageInfo {
endCursor
hasNextPage
hasPrevIoUsPage
startCursor
}
edges {
cursor
node {
acfDetails {
additionalNotes
address
city
closeDate
description
eMailAddress
fieldGroupName
latitude
longitude
maxAmps
maximumRvLength
numberOfSites
openDate
phoneNumber
picture {
altText
mediaItemUrl
}
state
website
zipCode
}
id
title
features {
nodes {
name
}
}
regions {
nodes {
name
}
}
ownerships {
nodes {
name
}
}
title
uri
id
link
}
}
}
}
`,});
const {dataset2} = await client.query({
query: gql`
query allCamps($endcursor: String) {
features(first: 300) {
nodes {
label: name
value: name
}
}
regions(first: 300) {
nodes {
id
name
regioncoord {
latitude
longitude
}
}
}
ownerships(first: 300) {
nodes {
id
name
}
}
campgrounds(first: 100,after: $endcursor) {
pageInfo {
endCursor
hasNextPage
hasPrevIoUsPage
startCursor
}
edges {
cursor
node {
acfDetails {
additionalNotes
address
city
closeDate
description
eMailAddress
fieldGroupName
latitude
longitude
maxAmps
maximumRvLength
numberOfSites
openDate
phoneNumber
picture {
altText
mediaItemUrl
}
state
website
zipCode
}
id
title
features {
nodes {
name
}
}
regions {
nodes {
name
}
}
ownerships {
nodes {
name
}
}
title
uri
id
link
}
}
}
}`,variables: {endcursor: data.campgrounds.pageInfo.endCursor}
})
const { features } = data;
const cities = [];
data.campgrounds.edges.map((city) => {
return cities.push({
city: city.node.acfDetails.city,});
});
dataset2.campgrounds.edges.map((city) => {
return cities.push({
city: city.node.acfDetails.city,})
})
const object = [];
features.nodes.map((feature) => {
return object.push({
label: feature.label,value: feature.label,});
});
return {
props: {
allCampInfo: data,regions: data.regions,camptypes: data.ownerships,object,graphCampgrounds: data.campgrounds.edges,cities,endCursor: data.campgrounds.pageInfo.endCursor,},};
}
export async function getStaticProps() {
const { data } = await client.query({
query: gql`
query allCamps {
features(first: 300) {
nodes {
label: name
value: name
}
}
regions(first: 300) {
nodes {
id
name
regioncoord {
latitude
longitude
}
}
}
ownerships(first: 300) {
nodes {
id
name
}
}
campgrounds(first: 200) {
pageInfo {
endCursor
hasNextPage
hasPrevIoUsPage
startCursor
}
edges {
cursor
node {
acfDetails {
additionalNotes
address
city
closeDate
description
eMailAddress
fieldGroupName
latitude
longitude
maxAmps
maximumRvLength
numberOfSites
openDate
phoneNumber
picture {
altText
mediaItemUrl
}
state
website
zipCode
}
id
title
features {
nodes {
name
}
}
regions {
nodes {
name
}
}
ownerships {
nodes {
name
}
}
title
uri
id
link
}
}
}
}
`,});
const { features } = data;
const cities = [];
data.campgrounds.edges.map((city) => {
return cities.push({
city: city.node.acfDetails.city,});
});
const object = [];
features.nodes.map((feature) => {
return object.push({
label: feature.label,};
}
解决方法
您在第二个查询中提取数据的方式似乎不正确。您需要再次提取 data。但是你可以这样别名：
const {data: dataset2} = await client.query({
在查询的返回对象中没有 dataset2 键，这就是您为 null 获得 dataset2 值的原因。