使用revalidateTag在Next.js中获取数据不起作用-我错过了什么？

tpxzln5u 于 2023-05-28 发布在其他

关注(0)|答案(1)|浏览(230)

我使用的是next 13.4.3，我试图通过revalidateTag用next fetch Package 器重新验证我的fetch数据。我找不到合适的方法来解决这个问题。在生产模式下（下一次构建和下一次启动），没有任何东西被重新渲染。这个功能是不是根本不起作用？我花了最后一天的时间试图使这个工作与graphql-request，因为它不工作与基本的获取我在这里。
我看了docs：https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating#on-demand-revalidation
我制作了一个API端点，它在其中调用revalidateTag方法，我制作了一个特殊的页面来测试它。下面是API的代码：

import { revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

export const POST = async (req: NextRequest) => {
  revalidateTag('a');
  console.log('revalidated');
  return NextResponse.json({ revalidated: true, now: Date.now() });
};

下面是该页面的代码：

const page = async () => {
  const res = await fetch('http://127.0.0.1:1337/graphql', {
    method: 'POST',
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      query: `
        query Settings($locale: I18NLocaleCode!) {
          setting(locale: $locale) {
            data {
              attributes {
                seo {
                  title
                }
              }
            }
          }
        }
      `,
      variables: {
        'locale': 'fr',
      },
    }),
    next: { tags: ['a'] }
  });
  const { data } = await res.json();
  return (
    <div>{data && data.setting.data.attributes.seo.title}</div>
  )
}

export default page;

next.js

来源：https://stackoverflow.com/questions/76301930/fetching-data-in-next-js-with-revalidatetag-doesnt-work-what-am-i-missing

1条答案

按热度按时间

3phpmpom1#

好吧，这是我的错在这一个，我没有检查，如果它是重新渲染后，第二次刷新。正如一条评论所说，该功能工作正常，下一步开始重新呈现页面上的第一个请求，你得到重新验证后，使第二个请求将获得新的数据。
上面的代码可以工作，因为我在graphql上工作（使用graphql-request），这里是我在我的page.tsx中调用的查询函数的代码：

export const Client = new GraphQLClient(`${API_URL}/graphql` as string, {
  headers: {
    authorization: TOKEN ? `Bearer ${TOKEN}` : '',
  },
  fetch: fetch,
});

export const QuerySettings = async (locale: string) => {
  const queryVariables = {
    locale: locale,
  };

  //Add revalidate Tags to next.js fetch
  Client.requestConfig.fetch = (url, options) => fetch(url, { ...options, next: { tags: ['settings'] } });

  const { setting } = await Client.request<{
    setting: {
      data: Setting;
    };
  }>(
    gql`
      query Settings($locale: I18NLocaleCode!) {
        setting(locale: $locale) {
          data {
            attributes {
              seo {
                title
              }
            }
          }
        }
      }
    `,
    queryVariables
  );

  return setting.data.attributes;
};

赞(0）回复(0）举报 2023-05-28

我来回答

使用revalidateTag在Next.js中获取数据不起作用-我错过了什么？

1条答案

相关问题

热门标签

最新问答