我已经为 Query 和 Mutations 包装,所以我可以全局处理每个 Query, Mutation
需要发生的重复操作.在查询中我转换数据所以我不需要担心所有 nodes, edges, etc
我正在使用 react-adopt
包裹我所有的query
和 mutations
将组件合并到 View 层上的一个渲染 Prop 中。
有效 - 一旦发生突变,页面将重新呈现
<ApolloQuery>
export const ApolloQuery = ({
query: query,
render,
}) => {
return (
<Query query={query}>
{({ data }) => {
return (
<Fragment>
render(data)
</Fragment>
)
}}
</Query>
)
}
组件
export default externalProps => {
return (
<QueryContainer {...externalProps}>
{({ someQueryData, aMutation }) => { //react-adopt render props
const { nestedData } = new apolloClass(someQueryData).start()
return (
<Grid container spacing={16}>
{nestedData.map((ticket, index) => (
{...Mutation button in here}
))}
</Grid>
)
}}
</QueryContainer>
)
}
不工作 - 页面不重新呈现但缓存已更新为正确的记录
<ApolloQuery>
<Query query={query}>
{({ data }) => {
const transformedData = new apolloClass(data).start() //move transform into render
return (
<Fragment>
render(transformedData)
</Fragment>
)
}}
</Query>
组件
export default externalProps => {
return (
<QueryContainer {...externalProps}>
{({ someQueryData: { nestedData }, aMutation }) => {
return (
<Grid container spacing={16}>
{nestedData.map((ticket, index) => (
{...Mutation button in here}
))}
</Grid>
)
}}
</QueryContainer>
)
}
所以现在,如果我移动 apolloClass
,页面将不会在突变后更新。在 query
的渲染之前进行转换
最佳答案
您很可能需要在 mutation options 中设置 refetchQueries
或 awaitRefetchQueries
强制 Apollo 更新这些查询并因此触发重新渲染。
关于javascript - 如果我在 render() 之前转换数据,则 React-apollo 更新不会在突变后重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57353999/