Hello, I will share my problem and how I found solution with my Next JS project when i using dynamic Meta Data from external API using GraphQL(Apollo Client).
When i use "useQuery" from apollo client it does not working when using SEO or when i share URL in to Social media like Facebook, Linkedin.
Solution is using "getInitialProps" with async method and Hit API from 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 };
}
Top comments (0)