how can I use partial data with relay?

Question

I recently start to learn relay and have a question about how I can use partial data with relay.

// 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>
    );
};

when I navigate to screen A to B relay makes server call and global suspense activates.
I’m sure relay knows about the cached products. because when I navigate screen B to A or set { fetchPolicy:’store-only’ } to Screen B, I get the cached products data with no loading or server call.
but with additional menus field, it seems relay makes query from scratch.
so is there a way to use partially cached query data with relay? such as like display cached parts and show loader while the rest is still pending? am I expecting some kind of defer mechanism that should implemented on react level not relay?

RaviRavi 35k22 gold badges122 silver badges183 bronze badges · Accepted Answer · 2023-11-13 06:37:20Z

Assuming you are using apollo client 3, you can utilise InMemoryCache.

Here is the detailed document for the same.

Apollo client is going to take each query as separate call, so basically you need to tell it that products data can be taken from cached data.

You can also find more information for the same from another thread https://stackoverflow.com/a/65112751/3134215

how can I use partial data with relay?