NextJS、Apollo、WPGraphQL & 组合或检索超过 100 条记录
Posted
技术标签:
【中文标题】NextJS、Apollo、WPGraphQL & 组合或检索超过 100 条记录【英文标题】：NextJS, Apollo, WPGraphQL & Combining or Retrieving more than 100 Records 【发布时间】：2021-07-21 06:53:56 【问题描述】：我正在尝试在 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,
,
;
【问题讨论】：
【参考方案1】：您在第二个查询中提取数据的方式似乎不正确。您需要再次提取data。但是你可以像这样给它起别名：
const data: dataset2 = await client.query(
查询返回的对象中没有dataset2 键，这就是为什么您会得到dataset2 的null 值。
【讨论】：
以上是关于NextJS、Apollo、WPGraphQL & 组合或检索超过 100 条记录的主要内容，如果未能解决你的问题，请参考以下文章
NextJS + Apollo：如何在 getServerSideProps 内的 apolloClient.query 上获取多个查询？
NextJS/Typescript/Apollo 错误；类型上不存在属性