我正在尝试在 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,
value: feature.label,
});
});
return {
props: {
allCampInfo: data,
regions: data.regions,
camptypes: data.ownerships,
object,
graphCampgrounds: data.campgrounds.edges,
cities,
endCursor: data.campgrounds.pageInfo.endCursor,
},
};
}