我最近开始学习中继,有一个问题,我如何使用部分数据与中继。
// Screen A
const ProductsPageQuery = graphql`
query products_PageQuery {
products(first: 5, channel: "default-channel") {
edges {
node {
id
name
description
}
}
}
}
`;
const Page = ({ preloadedQuery }: RelayProps<{}, products_PageQuery>) => {
const { products } = usePreloadedQuery(ProductsPageQuery, preloadedQuery);
return (
<div>
<code>products page</code>
<pre>{JSON.stringify(products, null, 2)}</pre>
</div>
);
};
// Screen B
const MenusPageQuery = graphql`
query menus_PageQuery {
products(first: 5, channel: "default-channel") {
edges {
node {
id
name
description
}
}
}
menus(first: 5) {
edges {
node {
id
name
slug
}
}
}
}
`;
const Page = ({ preloadedQuery }: RelayProps<{}, menus_PageQuery>) => {
const { products, menus } = usePreloadedQuery(MenusPageQuery, preloadedQuery);
return (
<div>
<code>menues page</code>
<pre>{JSON.stringify(products, null, 2)}</pre>
<pre>{JSON.stringify(menus, null, 2)}</pre>
</div>
);
};
字符串
当我导航到屏幕A到B时,relay进行服务器调用,全局挂起激活。我确信relay知道缓存的products
。因为当我导航屏幕B到A或将{ fetchPolicy:'store-only' }设置到屏幕B时,我会在没有加载或服务器调用的情况下获得缓存的products
数据。但是使用额外的menus
字段,似乎relay从头开始进行查询。那么有没有一种方法可以使用relay的部分缓存查询数据?比如像显示缓存的部分和显示加载器,而其余的仍然是挂起的?我期待某种延迟机制,应该在React水平上实现,而不是中继?
1条答案
按热度按时间r3i60tvu1#
假设你使用的是apollo客户端3,你可以使用
InMemoryCache
。这是同样的详细文件。
Apollo客户端将把每个查询作为单独的调用,所以基本上你需要告诉它产品数据可以从缓存数据中获取。
您也可以从另一个线程https://stackoverflow.com/a/65112751/3134215找到更多信息