我正在使用react + apollo编写一个应用程序,并且遇到了一些不确定我是否能以最佳方式解决的问题。在构建React + Apollo应用程序方面寻求专业人士的帮助。
假设公司中有一个用户列表,并且该用户从该列表中删除自己。我将其命名为DELETE_USER_FROM_COMPANY,然后告诉Apollo应该重新查询哪些查询(USER_COMPANY_LIST),一切正常。除了我无法解决的问题外,还有一个本地查询SELECTED_COMPANY_ID,该查询存储用户选择的当前公司,并且在用户将自己从公司中删除后,原来不能再选择当前选择的公司。 。而且我需要一种方法来了解当前用户的状态已更改,并且我必须更新存储在缓存中的所选公司。
我这样做如下:我使用USER_COMPANY_LIST查询创建了一个组件,该组件在更新公司列表时会检查当前选择的公司,即,事实证明该组件不呈现任何视图,而是执行业务逻辑。像这样:
export default () => (<Query query={GET_USER_COMPANIES}>{({ client, loading, data:{ companies } }) => {
if(loading) return null;
checkSelectedCompanyId(client.cache, companies);
return null;
}}</Query>)
function checkSelectedCompanyId(cache, companies) {
const data = tryReadFromCache(cache, GET_SELECTED_COMPANY_ID);
if(!data || !data.selectedCompanyId || !companies.some(c => c.id == data.selectedCompanyId)) {
if(companies.length > 0) {
cache.writeData({ query: GET_SELECTED_COMPANY_ID, data: { selectedCompanyId:companies[0].id } });
} else {
cache.writeData({ query: GET_SELECTED_COMPANY_ID, data: { selectedCompanyId: null } });
}
}
}
在Query组件渲染函数中编写业务逻辑是正确的方法还是在不使用组件的情况下订阅USER_COMPANY_LIST查询并更新缓存的另一种方法?