Question

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

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完成查询为止（即，在submitting.loading等待期间）？

我正在运行香草的nextjs react应用。

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

我试图将我的apollo客户端设置为使用ssr，如下所示：

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

要弄清楚何时说“块渲染”，我的意思是推迟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并从中返回查询来解决此问题，因此直到将查询结果作为道具传递给根组件时，根组件才会加载。

阻止渲染直到查询结束？

3 个答案: