Здравствуйте, я поделюсь своей проблемой и тем, как я нашел решение в моем проекте Next JS, когда я использую динамические мета-данные из внешнего API с помощью GraphQL (Apollo Client).
Когда я использую «useQuery» из клиента apollo, он не работает при использовании SEO или когда я делюсь URL в социальных сетях, таких как Facebook, Linkedin.
Решение заключается в использовании «getInitialProps» с асинхронным методом и Hit API из getInitialProps.
const DetailBlogPage: NextPage = ({ data }: any) => {
return (
<SiteLayout>
<NextSeo
title={data.articles.title}
description={data.article..summary}
canonical={`https://www.nuliscv.com/blog/${data.article.slug}`}
openGraph={{
type: 'website',
locale: 'id_ID',
url: `https://www.example.com/blog/${data.articles[0].slug}`,
site_name: 'Example.com',
images: [
{ url: `https://abcdefg.directus.app/assets/${data.articles[0].image.id}` },
]
}}
/>
<div>
<DetailBlog data={data} />
</div>
</SiteLayout>
)
}
DetailBlogPage.getInitialProps = async ({ query }) => {
// do the data fetching here
const { slug } = query;
const errorLink = onError(({ graphqlErrors, networkError }: any) => {
if (graphqlErrors) {
graphqlErrors.map(({ message, location, path }: any) => {
});
}
});
const portfolioLink = from([
errorLink,
new HttpLink({ uri: "https://abcdefg.directus.app"}),
]);
const client = new ApolloClient({
cache: new InMemoryCache({
addTypename: false
}),
link: portfolioLink,
});
const { data } = await client.query({
query: GET_DETAIL_BLOG,
variables: {
slug
}
})
return { data: data };
}