NextJS、Apollo、WPGraphQL & 组合或检索超过 100 条记录

Question

我正在尝试在 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,
    },
  };
}

Answer 1

您在第二个查询中提取数据的方式似乎不正确。您需要再次提取 data。但是你可以像这样给它取别名：

const {data: dataset2} = await client.query({

查询返回的对象中没有 dataset2 键，这就是为什么您得到 dataset2 的 null 值的原因。

NextJS、Apollo、WPGraphQL & 组合或检索超过 100 条记录

NextJS, Apollo, WPGraphQL & Combining or Retrieving more than 100 Records

reactjs

graphql

next.js

apollo

wp-graphql