title: Cache GraphQL query with multiple ids using Apollo
body: <p>we're using apollo client in a web application and are looking for ways to improve cache usage.</p>
  
  <p>We have a query that takes an array of ids as parameter an example query with ids <code>foo</code> and <code>bar</code> would look like this:</p>
  
  <pre><code>query routes {
    routes(routeNames: ["foo", "bar"]) {
      items {
        name
        route
        defaults
      }
    }
  }
  </code></pre>
  
  <p>The cache setup looks like this:</p>
  
  <pre><code>export const cacheRedirects = {
    Query: {
      routes: (_: any, args: RoutesArgs, { getCacheKey }: Resolver&lt;'name'&gt;): Array&lt;CacheKey&gt; =&gt;
        args.routeNames.map(name =&gt; getCacheKey({ __typename: 'Route', name })),
    },
  };
  
  export const dataIdFromObject = (object: QueryResult): ?string =&gt; {
    switch (object.__typename) {
      case 'Route':
        return `${object.__typename}:${object.name}`;
      default: return defaultDataIdFromObject(object);
    }
  };
  
  export function newCache(): InMemoryCache {
    return new InMemoryCache({ dataIdFromObject, cacheRedirects });
  }
  </code></pre>
  
  <p>Now when using the query in several places in our client we'd like to fetch only data for routeNames not cached via network and retrieve the rest via cache.</p>
  
  <p>So the problem boils down to this:
  When having one query that caches the results for <code>routeNames: ["foo", "bar"]</code> and later another query comes along asking for the routes for <code>routeNames: ["bar", "baz"]</code> we'd love to take the result corresponding to <code>"bar"</code> from cache and send a query for <code>routeNames: ["baz"]</code>.</p>
  
  <p>I'm uncertain whether and how this can be done with Apollo because in contrast to the <a href="https://www.apollographql.com/docs/react/advanced/caching.html#cacheRedirect" rel="noreferrer">cacheRedirect example</a> here we deal with multiple ids rather than a single one.</p>
  
  <hr>
  
  <p>Now if we can't cache per array item the next best thing we could do would be to transform the ids into common cache keys so that <code>["foo", "bar"]</code> and <code>["bar", "foo"]</code> end up using the same cache key, but <code>["foo", "baz"]</code> would use a different one.</p>
  
  <p>Of course the ideal thing would be to only fetch <code>"baz"</code> as the missing item in our scenario.</p>