I am trying to retrieve more than 100 records for a WPGraphQL query using Apollo during getStaticProps. The wonderful WPGraphQL maker, Jason, pointed me towards using the pagination method and then combining the results into one new Array (or Object?).
The issue i'm having though is...well I can't get it to combine or really do anything more than getting one query. In my getStaticProps I have one query which retrieves only 100 records & works, but if I try to add another one it doesn't work, and I get a error on the data saying it doesn't exist (even though I know it exists...):
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 | });
So i'm unsure what to do and hoping you folks can help. I'm sure i'm just missing something stupid or doing something stupid.
Ultimately I am trying to effectively just retrieve ~156 records from the database without pagination, which I guess the best way to do it is to split it into two queries and then combine the data. Thank you so much for any help.
Here's my getStaticProps code that doesn't work:
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,
},
};
}
And here's the code with just one query that does work:
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,
},
};
}
The way you are extracting the data in your second query seems to be incorrect. You need to extract
dataagain. But you can alias it like so:There is no
dataset2key in the returned object of the query, that is why you get anullvalue fordataset2.