title: How to handle meta tags in react?
body: <p>I'm trying to figure out how to add meta tags to my webpage in a way that it can be accessed.</p>
  
  <p>My issue is that the meta tags are dependant on an async operation completing:</p>
  
  <pre><code>import * as React from 'react'
  import { Dialog } from '@material-ui/core';
  import { withRouter, RouteComponentProps } from 'react-router';
  import gql from 'graphql-tag';
  import { useQuery } from 'react-apollo-hooks';
  import { SubmissionFocus } from './SubmissionFocus';
  import MetaTags from 'react-meta-tags';
  import { Submission } from '../../AppContext';
  
  const SUBMISSION = gql`query submission($id: String!) {
      submission(id: $id) {
        url
        id
        title
        comments {
          id
          comment
          replyingCommentId
          username
        }
        tags
        embedVideo {
          type
          url
          width
          height
        }
        preview {
          url
          type
          width
          height
        }
      }
    }
  `
  const BaseRoutedSubmissionFocus = (props: RouteComponentProps) =&gt; {
    const path = props.location.pathname;
    const p = path.split('/').filter((s) =&gt; s !== "")
    let submissionId = p[0] == 's' &amp;&amp; p[1]
    **const submission = useQuery(SUBMISSION, {
      variables: {
        id: submissionId
      },
      skip: submissionId === false
    })**
  
    const dismiss = () =&gt; {
      props.history.push("/");
    }
  
    if (p[0] !== 's')
      return &lt;&gt;&lt;/&gt;
  
    const sub: Submission | undefined = submission.data!.submission
    return &lt;&gt;
      {sub &amp;&amp; &lt;MetaTags&gt;
        &lt;title&gt;Page 1&lt;/title&gt;
        &lt;meta name="description" content="Some description." /&gt;
        &lt;meta property="og:title" content={sub.title} /&gt;
        &lt;meta property="og:image" content={sub.preview.url} /&gt;
      &lt;/MetaTags&gt;}
  
      &lt; Dialog onClose={dismiss} open={!!submissionId
      }
        maxWidth="lg"
        fullWidth={true} &gt;
        &lt;div style={{ height: '90vh' }}&gt;
          {!submission.loading &amp;&amp; submission.data &amp;&amp; &lt;SubmissionFocus allowExpand={false} submission={sub} /&gt;}
        &lt;/div&gt;
      &lt;/Dialog &gt;
    &lt;/&gt;
  }
  
  export const RoutedSubmissionFocus = withRouter(BaseRoutedSubmissionFocus);
  </code></pre>
  
  <p>useQuery is an async operation and until it has finished loading I don't have meta tags.</p>
  
  <p>Any ideas around this? I was thinking if there's a way to delay react emitting any html until certain operations are completed I can get away with it.</p>