0

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

4

1 回答 1

1

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

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

查询的返回对象中没有dataset2键,这就是为什么你得到一个null值的原因dataset2

于 2021-05-26T00:24:04.400 回答