Sharing/Fetching NextJS 中每个组件的数据

Question

我正在尝试使用 GraphQL 从我的模型中获取一些数据，以便通过本地化语言动态预填充导航栏：

export async function getPageTitleBySlug(slug) {
  const data = await fetchAPI(
    `query PageTitleBySlug($where: JSON){
      pages(where: $where) {
        title_en
        title {
          title_es
          title_tr
        }
      }
    }`,
    {
      variables: {
        where: { slug },
      },
    }
  )

  return data
}

很简单。

我从 navbar 组件调用这个函数：


export async function getLocalizedTitle(slug) {
  const data = await getPageTitleBySlug(slug)
  return { ...data?.pages[0] }
}

此函数在组件内部调用：

  const [labels, setLabels] = useState(links.map(({ label }) => ({ [label]: "" })))

  useEffect(() => {
    links.map(async ({ label }) => {
      const { title, title_en } = await getLocalizedTitle(label)

      const localizedTitle =
        title[
          Object.keys(title).find(
            (content) => content.split("_")[1] == i18n.language
          )
        ] || title_en
      setLabels({ [label]: localizedTitle })
    })
  }, [i18n.language])

它确实有效，因为每次我更改本地语言时，都会调用此效果。

我的想法是从以下字典中获取值：

        {links.map(({ key, href, label }) => (
          <MenuItem key={key}>
            <Link href={href}>
              <a></a>
            </Link>
          </MenuItem>
        ))}

不幸的是，每次调用此函数或刷新网站时，我都会得到：

很容易意识到问题出在 fetch 中，但是当我从组件调用 fetch 时，它就发生了。

我尝试在呈现页面之前填充数据，但 getInitialProps 和 setStaticProps 仅适用于页面。

更新按照我在此中找到的指示，我进行了下一次更新：

FolioApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)

  // TODO: Here at beginning is undefined, so, i'm getting errors in console, it should be a defaultProp, but how?
  let navProps = {}
  menu_links.map(async ({ label }) => {
    const { title, title_en } = await getLocalizedTitle(label)
    navProps[label] = { title, title_en }
  })

  const defaultProps = appContext.Component.defaultProps

  return {
    ...appProps,
    navProps,
    pageProps: {
      namespacesRequired: [
        ...(appProps.pageProps.namespacesRequired || []),
        ...(defaultProps?.i18nNamespaces || []),
      ],
    },
  }
}

我的目标是获得一个字典，其中包含标题（object）和数组中所有链接的 title_en 值，调用一次函数。后来，我将这本字典作为默认属性传递给 _app 组件：

const FolioApp = ({ Component, pageProps, navProps }) => {
  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyle = document.querySelector("#jss-server-side")

    if (jssStyle) {
      jssStyle.parentElement.removeChild(jssStyle)
    }
  }, [])

  return (
    <>
      <Meta />
      <DefaultSeo
        {...DefaultSEO}
        additionalMetaTags={[
          {
            name: "msapplication-TileColor",
            content: CMS_TILE_COLOR,
          },
          {
            name: "msapplication-config",
            content: "/favicon/browserconfig.xml",
          },
        ]}
      />
      {/* TODO: Add a proper theme */}
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Nav navLinks={navProps} />
        <Component {...pageProps} />
        <Footer navLinks={navProps} />
      </ThemeProvider>
    </>
  )
}

navLinks 是属性，我将它传递给 footer 和 nav。当页面确实存在时，它大部分时间都有效；但是，当我们收到 404 错误页面甚至在索引中时，它就不起作用了：

我在错误或索引页中得到一个空的 navLinks。为什么？

更新： 现在，我尝试使用 Promise.all 来解决它，以便在将所有获取的数据传递给道具之前加入一次：

await Promise.all(
    menu_links.map(async ({ label }) => {
      const { title, title_en } = await getLocalizedTitle(label)
      navProps[label] = { title, title_en }
    })
  )

它确实有效，但我不太喜欢这个解决方案。

我搜索了 cms-strapi 示例，我发现它从一次提取中获取了全部数据，这是最好的，因为 getInitialProps 只执行一次并且比单独提取执行得更好对于每种不同类型的所需数据。

因此，由于 strapi documentation，我更改了我的获取功能，我重新制作了该功能以获取所有数据，然后再将其传递给属性。

它解决了呈现菜单的问题，但它没有解决下一个我在 Promise.all 和获取解决方案中遇到的问题：

如您所见，每次我转到索引页面时，我都会遇到该错误，它的发生是因为它使用 localhost:3000/undefined/graphql 而不是 localhost:1337/graphql 来获取，它被设置为 process.env.API_URL 默认为 process.env.API_URL；当我从每个页面重定向到 Home(index) 时，有时会出现 404 或 500 错误。

不是很懂

我该如何处理？

谢谢。

Answer 1

太好了，我们终于可以用下一种方式处理了。

首先，看一下 NextJS 主要示例 post page we can realize it is using a function for fetching the post and another additional post; going deep on this function，我们可以看到它只是获取整个数据的获取：它是不是使用不同的获取函数逐部分获取数据，而是使用 GraphQL 查询来获取所有必需的数据。

按照这种方式，我们重构我们的函数以在单个对象中获取整个名称作为获取响应：

export async function getPageTitlesBySlugSet(slugSet) {
  const data = await fetchAPI(
    `query PageTitleBySlug($where: JSON){
      pages(where: $where) {
        slug
        title_en
        title {
          title_es
          title_tr
        }
      }
    }`,
    {
      variables: {
        where: { slug_in: slugSet },
      },
    }
  )

  return data?.pages
}

想法是获取 navLinks 中存在该 slug 的所有页面，但是怎么做呢？我们可以直接考虑使用过滤器（作为 GraphQL 特性），但是在 Strapi 的 GraphQL 控制台中测试它，我们看不到文件管理器选项；我们可以做什么？阅读文档，实际上，我们可以使用 field_in 到 filter 字段匹配数组值的任何对象；因此，将 navLinks 中的 slug 作为字典传递，我们可以获得与想要的 slug 匹配的所有页面：

const navProps = await getPageTitlesBySlugSet(menu_links.map(({ label }) => label))

太棒了，现在我们可以更轻松地一次获取所有数据了。很酷，现在我们可以将 navProps 作为属性传递给页脚和导航组件，我们将处理它以本地化它们：

{navLinks &&
                Object.keys(navLinks).length !== 0 &&
                menu_links.map(({ key, href, label }) => (
                  <Link href={href} key={key} passHref>
                    <MenuItem>{localizedTitle(label)}</MenuItem>
                  </Link>
                ))}

很好，但我们仍然有一个问题：有时访问索引会给我们带来问题，因为它试图使用 API URL , 但它只能从服务器访问，它不是 public 客户端;因此，它无法正确获取，给我们一个错误。

如何解决？同样，在 documentation 中它说我们必须使用 NEXT_PUBLIC_ 作为我们希望也可以从客户端访问的每个变量的前缀。所以，我们把它解决了我们的问题，现在我们可以从站点中的每个页面导航到索引页面。

就这些了。

还有一个时间慢的问题，我们稍后会处理。

Sharing/Fetching NextJS 中每个组件的数据

Sharing/Fetching data per component in NextJS

javascript

reactjs

graphql

fetch-api

next.js