查询在 nextjs 的 [slug].js 文件中不起作用 - 使用 acf

Question

我最近建立了一个 Next.js 项目以及一个无头的 Wordpress CMS。我的帖子和页面使用自定义 Gutenberg 块来提取内容。我在 CMS 上设置了以下插件：

WP GraphQl、WP GraphQL Gutenberg、用于高级自定义字段和 ACF Pro 的 WPGraphQL。

我在 ACF 中设置了一个 'Image' 块，它有一个文本字段和一个图像字段。

在我的代码中，我的 lib/api.js 文件中有一个查询，如下所示（14 是当前所选图像的 ID - 这将更改）：

export async function getImageById() {
    const data = await fetchAPI(
      `
      query GetImageDetails($id: Int = 14) {
        mediaItems(where: {id: $id}) {
          nodes {
            mediaItemUrl
            mediaItemId
          }
        }
      }
      `
    )

    return data;
}

我的文件夹结构如下

库
组件
- 块
- universalImage.js
页数
- 博客
  - index.js
  - [鼻涕虫].js
Public

如果我在 index.js 文件中调用查询，它 returns 媒体图像上的信息：

export default function Home({posts, first, imgs}) { 
   console.log(imgs)

   return(
      <div>
         //all my content
      </div>
   )
}

export async function getStaticProps() {
    const images = await getImageById();
    const jsonI = await images;

    return {
        props: {
            imgs: jsonI
        }
    }
}

但是，如果我尝试在我的 [slug].js 文件中调用它，我会返回一个空数组

[slug].js代码

export default function Post(postData, imgs) {
   console.log(imgs)

   return(
      <div>
         //all my content
      </div>
   )
}

export async function getStaticPaths() {
  const allPosts = await getAllPostsWithSlug();

  return {
    paths: allPosts.edges.map(({node}) => `/blog/${node.slug}`) || [],
    fallback: true
  };
}

export async function getStaticProps({ params }) {
  const data = await getPost(params.slug);
  const imgs = await getImageById();

  return {
    props: {
      postData: data.post,
      imgs
    }
  }
}

我是 Next.js 和 React 的新手，所以也许我遗漏了一些明显的东西，但是任何帮助将不胜感激，因为我无法在项目中取得更多进展。

此外，如果您需要更多信息，请告诉我。

FetchAPI 函数为：

async function fetchAPI(query, { variables } = {}) {
  // Set up some headers to tell the fetch call
  // that this is an application/json type
  const headers = { 'Content-Type': 'application/json' };

  // build out the fetch() call using the API_URL
  // environment variable pulled in at the start
  // Note the merging of the query and variables

  const res = await fetch(API_URL, {
    method: 'POST',
    headers,
    body: JSON.stringify({ query, variables })
  });

  // error handling work
  const json = await res.json();
  if (json.errors) {
    console.log(json.errors);
    console.log('error details', query, variables);
    throw new Error('Failed to fetch API');
  }
  return json.data;
}

Answer 1

您正在使用对象 property-value shorthand 和 return 键“imgs”，但没有具有该名称的变量。您可以尝试将“images”常量的名称更改为“imgs”，或者需要在 return 语句中使用 imgs: images。

...
const images = await getImageById();

return {
  props: {
    postData: data.post,
    imgs: images // or change the name of "images" constant to "imgs"
  }
}

Answer 2

问题是我缺少一组括号 {}。

export default function Post({ postData, imgs }) { ... }

感谢@juliomalves！

查询在 nextjs 的 [slug].js 文件中不起作用 - 使用 acf

Query not working within [slug].js file in nextjs - using acf

javascript

wordpress

next.js

wordpress-gutenberg

wp-graphql