我的 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 呈现”时，我的意思是推迟 SSR 完成，直到服务器有数据发送给用户，以便标签将立即与加载的页面一起出现。
最佳答案
你正在做的应该有用 - 试试
return null
代替
return <></>
虽然结果应该很相似
关于reactjs - 阻塞渲染直到查询完成？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57677384/