WpGraphQL 查询 returns 空

Question

我通过 WpGraphQl 插件从 Nexjs 中的无头 Wordpress 获得这个 GraphQL 查询：

export const GET_POSTS_BY_CATEGORY_SLUG = gql`
 query GET_POSTS_BY_CATEGORY_SLUG( $slug: String, $uri: String, $perPage: Int, $offset: Int ) {
 ${HeaderFooter}
  page: pageBy(uri: $uri) {
    id
    title
    content
    slug
    uri
    seo {
      ...SeoFragment
    }
  }
  categories(where: {slug: $slug}) {
    edges {
      node {
        slug  
        posts: posts(where: { offsetPagination: { size: $perPage, offset: $offset }}) {
          edges {
            node {
              id
              title
              excerpt
              slug
              featuredImage {
                node {
                  ...ImageFragment
                }
              }
            }
          }
          pageInfo {
            offsetPagination {
              total
            }
          }
        }
      }
    }
  }
}
 ${MenuFragment}
 ${ImageFragment}
 ${SeoFragment}
 `;

这是我的 getStaticProps 函数：

export async function getStaticProps(context) {
  

  const { data: category_IDD } = await client.query({
    query: GET_POSTS_BY_CATEGORY_SLUG,
  });
  

  const defaultProps = {
    props: {
      
      cat_test: JSON.parse(JSON.stringify([category_IDD])),
    },

    revalidate: 1,
  };

  return handleRedirectsAndReturnData(defaultProps, data, errors, "posts");
}

如果我在道具中这样传递它：

const defaultProps = {
    props: {

      cat_test: category_IDD,
    },

我收到一条错误消息：

SerializableError: Error serializing `.cat_test` returned from `getStaticProps` in "/category/[slug]". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

但是当我 JSON.parse 如上面的代码时，我得到 null

这个查询有什么问题？

Answer 1

刚注意到$slug是一个字符串数组，所以这里应该是：

query GET_POSTS_BY_CATEGORY_SLUG( $slug: [String], $uri: String, $perPage: Int, $offset: Int )

而不是$slug: String

Answer 2

您实际上并未将 $slug 变量传递给查询。例如，如果您的页面路由是 /category/[slug].js，您的 getStaticProps 应该看起来像这样。

export async function getStaticProps(context) {
  const { slug } = context.params;

  const { data: category_IDD } = await client.query({
    query: GET_POSTS_BY_CATEGORY_SLUG,
    variables: { slug },
  });
  

  const defaultProps = {
    props: {
      
      cat_test: JSON.parse(JSON.stringify([category_IDD])),
    },

    revalidate: 1,
  };

  return handleRedirectsAndReturnData(defaultProps, data, errors, "posts");
}

WpGraphQL 查询 returns 空

WpGraphQL query returns null

graphql

next.js

headless-cms

wp-graphql