在查询完成之前阻止渲染？答案

【问题标题】：Block render until query has finished?在查询完成之前阻止渲染？
【发布时间】：2019-12-31 19:04:26
【问题描述】：

我的反应应用中有一个标题组件：

const SubmissionMeta = (props: { submissionId: string }) => {
    const { submissionId } = props
    let submission = useQuery(SUBMISSION_META, {
        ssr: true,
        variables: {
            id: submissionId
        },
        skip: submissionId === undefined
    })
    if (submission.loading || !submission.data) {
        return <></>
    }
    console.log(submission.data.submission.preview.url)

    const url = submission.data.submission.preview.url
    return <Head>
        <title>test title 123</title>
        <meta property="og:image" content={url} />
    </Head>
}

有没有办法阻止渲染，直到 useQuery 完成查询（即在 submit.loading 等待时）？

我正在运行一个普通的 nextjs react 应用程序。

我的目标是从远程 graphql 端点获取一些数据并使用该数据填充标头。

我尝试将我的 apollo 客户端设置为像这样使用 ssr：

let client = new ApolloClient({
  ssrMode: true,
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

为了澄清当我说“块渲染”时，我的意思是推迟 SSR 完成，直到服务器有数据要发送给用户，以便标签将立即与加载的页面一起出现。

【问题讨论】：

标签： reactjs graphql apollo next.js

【解决方案1】：

你正在做的应该工作 - 尝试

return null

而不是

return <></>

结果应该很相似

【讨论】：

不起作用，页面呈现然后最终标题元数据在查询完成加载时发生变化
@tweetypi 是 submitId 道具改变了吗？如果它未定义，我看到你跳过。也许if (!submissionId || submission.loading || !submission.data) {return null}
据我所知与此无关

【解决方案2】：

来自Apollo docs

const SubmissionMeta = ({submissionId}) => {
    const { loading, error, data } = useQuery(SUBMISSION_META, {
        ssr: true,
        variables: {
            id: submissionId
        },
        skip: submissionId === undefined
    })
    if (loading) return null;
    if (error) return `Error! ${error.message}`;

    console.log(submission.data.submission.preview.url)
    const url = submission.data.submission.preview.url
    return (<Head>
        <title>test title 123</title>
        <meta property="og:image" content={url} />
    </Head>);
}

【讨论】：

不起作用，页面呈现然后最终标题元数据在查询完成加载时发生变化

【解决方案3】：

通过使用getInitialProps 并从中返回查询来解决这个问题，因此在将查询结果作为 props 传递给它之前，根组件不会加载。

【讨论】：