NextSeo not updated when inspect source code using dynamic Meta data and using external API

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