0

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

WP GraphQl、WP GraphQL Gutenberg、WPGraphQL for Advanced Custom Fields 和 ACF Pro。

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

在我的代码中，我的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;
}

我的文件夹结构如下。

  • 库
  • 成分
    • 块
    • 通用图像.js
  • 页面
    • 博客
      • index.js
      • [蛞蝓].js
  • 上市

如果我在index.js文件中调用查询，它会返回有关媒体图像的信息：

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;
}
4

2 回答 2

1

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

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

感谢@juliomalves！

于 2022-03-01T17:09:19.547 回答
0

您正在使用对象属性值速记并返回键“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"
  }
}
于 2022-02-19T00:12:18.483 回答