reactjs 如何使用中继部分数据?

vptzau2j  于 2023-11-18  发布在  React
关注(0)|答案(1)|浏览(77)

我最近开始学习中继,有一个问题,我如何使用部分数据与中继。

// 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水平上实现,而不是中继?

r3i60tvu

r3i60tvu1#

假设你使用的是apollo客户端3,你可以使用InMemoryCache
这是同样的详细文件。
Apollo客户端将把每个查询作为单独的调用,所以基本上你需要告诉它产品数据可以从缓存数据中获取。
您也可以从另一个线程https://stackoverflow.com/a/65112751/3134215找到更多信息

相关问题