阻塞渲染直到查询完成？

Question

我的 React 应用程序中有一个 header 组件：

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 完成查询之前阻止渲染（即 submission.loading 等待）？

我是运行普通的 nextjs React 应用程序。

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

我试过设置我的 apollo 客户端来像这样使用 ssr:

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

澄清一下我说的 'block rendering' 我的意思是在服务器有数据发送给用户之前推迟 SSR 最终确定，这样标签将立即与加载的页面一起显示。

Answer 1

你正在做的应该有用 - 试试

return null

而不是

return <></>

虽然结果应该非常相似

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

Answer 3

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

阻塞渲染直到查询完成？

Block render until query has finished?

apollo

reactjs

graphql

next.js