GraphQL Apollo pagination and type policies

Viewed 42

I am really struggling with this concept. I hope someone can help me understand it better. The documentations uses a simple example and it's not 100% clear to me how it works. I have tried using keyArgs, but they didn't work, so I adopted to use the args parameter in the read and merge functions. First, let me explain my scenario.

I have a couple of search endpoints that use the same parameters:

{ 
  search: 
  {
    searchTerm: "*",
    includePartialMatch: true,
    page: 1,
    itemsToShow: 2,
    filters: {},
    facets: [],
    orderBy: {}
  }
}

So I have setup my type policies like this:

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        searchCategories: typePolicy,
        searchBrands: typePolicy,
        searchPages: typePolicy,
        searchProducts: typePolicy,
      },
    },
  },
});

And I was using a generic typePolicy for them all. At first, I tried this:

const typePolicy = {
  keyArgs: [
    "search",
    [
      "identifier",
      "searchTerm",
      "includePartialMatches",
      "filters",
      "orderBy",
      "facets",
    ],
  ],
  // Concatenate the incoming list items with
  // the existing list items.
  merge(existing: any, incoming: any) {
    console.log("existing", existing);
    console.log("incoming", incoming);
    if (!existing?.items) console.log("--------------");
    if (!existing?.items) return { ...incoming }; // First request
    const items = existing.items.concat(incoming.items);
    const item = { ...existing, ...incoming };
    item.items = items;
    console.log("merged", item);
    console.log("--------------");
    return item;
  },
};

But this does not do what I want. What I would like, is for apollo to work as it does normally, but when the "page" changes for any field, it appends it instead of caching a new request. Does anyone know what I am doing wrong or can provide me with a better example that what is on the documentation?

0 Answers
Related