Reactjs 在查询完成之前阻止渲染？_Reactjs_Graphql_Apollo_Next.js

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

reactjs graphql next.js

Reactjs 在查询完成之前阻止渲染？,reactjs,graphql,apollo,next.js,Reactjs,Graphql,Apollo,Next.js,我的react应用程序中有一个标题组件： const SubmissionMeta = (props: { submissionId: string }) => { const { submissionId } = props let submission = useQuery(SUBMISSION_META, { ssr: true, variables: { id: submissionId },

我的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>
}

为了澄清我所说的“块渲染”，我的意思是在服务器有数据发送给用户之前，不要进行SSR最终确定，这样标签将与加载的页面一起立即显示。

您所做的工作应该有效-请尝试

return null

而不是

return <></>

返回

结果应该是非常相似的，尽管你所做的应该是可行的-试试看

return null

而不是

return <></>

返回

结果应该非常相似，尽管从

const SubmissionMeta=（{submissionId}）=>{
const{loading，error，data}=useQuery（提交）{
ssr：没错，
变量：{
id:提交id
},
跳过：submissionId==未定义
})
if（加载）返回null；
if（error）返回`error！${error.message}`；
log（submission.data.submission.preview.url）
const url=submission.data.submission.preview.url
返回(
测试标题123
);
}

来自

const SubmissionMeta=（{submissionId}）=>{
const{loading，error，data}=useQuery（提交）{
ssr：没错，
变量：{
id:提交id
},
跳过：submissionId==未定义
})
if（加载）返回null；
if（error）返回`error！${error.message}`；
log（submission.data.submission.preview.url）
const url=submission.data.submission.preview.url
返回(
测试标题123
);
}

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

不起作用，页面呈现，然后在查询完成时最终更改标题元数据loading@tweetypisubmissionId道具是否正在更改？如果没有定义，我看你跳过了。。也许

如果（！submissionId | | | submission.loading | | | |！submission.data）{return null}

没有任何关系，只要我能确定它不起作用，页面呈现最终会在查询完成时更改标题元数据loading@tweetypisubmissionId道具是否正在更改？如果没有定义，我看你跳过了。。也许

如果（！submissionId | | | | | | | | | |！submission.data）{return null}

就我所知与此无关，页面呈现然后最终标题元数据更改当查询完成加载不起作用时，页面呈现最终标题元数据更改当查询完成加载时