Apollo-client: [3.0] TypePolicy Does Not Trigger Network Fetch on Cache Miss

[jamshally]

This is a follow up from resolved issue #5709

Summary
When using a TypePolicy in a "cache-redirect" style (see code below), and a cache-miss occurs, the query should then generate a network request to get the data (per this thread). In actual fact, the request just returns with an empty object.

Setup

• A TypePolicy references UserListView from a UserDetailView Query (per below)
• Initiate a request for a User_by_pk with a 'cache-first' fetch policy

    export const UserTypePolicy: TypePolicies = {
        Query: {
          fields: {
            User_by_pk:{
              keyArgs: ["id"],
              read(existingData, { args, toReference }) {
                return existingData || toReference({ __typename: 'User', id: args!.id });
              },
            }
          },
        },
      };

Intended outcome:
If "User" entities are not available in cache, a network request should be initiated to get the data

Actual outcome:
An empty result is returned, and not network request is generated

How to reproduce the issue:

1. Setup TypePolicy per above
2. Initiate a DetailView Query before a ListView query
3. See that a network request is not triggered, and an empty result is returned

Versions
System:
OS: macOS 10.15.2
Binaries:
Node: 13.6.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.117
Safari: 13.0.4
npmPackages:
@apollo/client: link:../../webclient/node_modules/@apollo/client => 3.0.0-beta.23
@apollo/react-hooks: link:../../webclient/node_modules/@apollo/react-hooks => 3.2.0-beta.0

[jamshally]

@benjamn - I am happy to have a go at creating reproduction for this using the React-Apollo-Error Template. However, I am not familiar with building out GraphQL schema manually, and getting stuck there...

If you or one of your team could give me some quick pointers on how to add a "PersonById" query to the React-Apollo-Error Template, then I can finish out the error repro. Relevant section of code pasted below for convenience.

Target By Id Query

const PERSON_BY_ID = gql`
  query PersonById($id:number) {
    person(id: $id) {
      id
      name
    }
  }
`;

Error Template Existing Mock Backent (from schema.js)
```

//
// !!--> NEED TO FIGURE OUT HOW TO UPDATE THE BELOW TO ACCOMODATE THE BY_ID_QUERY <-- !!
//

const ALL_PEOPLE = gql query AllPeople { people { id name } } ;

const PersonType = new GraphQLObjectType({
name: 'Person',
fields: {
id: { type: GraphQLID },
name: { type: GraphQLString },
},
});

const peopleData = [
{ id: 1, name: 'John Smith' },
{ id: 2, name: 'Sara Smith' },
{ id: 3, name: 'Budd Deey' },
];

const QueryType = new GraphQLObjectType({
name: 'Query',
fields: {
people: {
type: new GraphQLList(PersonType),
resolve: () => peopleData,
},
},
});```

[benjamn]

@ahrnee Thanks, that code will be helpful for creating some tests. In the meantime, if running npm install @apollo/[email protected] (which includes #5830) solves your problem, that would also help confirm the diagnosis.

[benjamn]

Here's a branch where I've added a Query.person(id) field: https://github.com/apollographql/react-apollo-error-template/tree/single-person-field-example

And here's the relevant commit: https://github.com/apollographql/react-apollo-error-template/commit/22dc84616c9e98c1249939814805f782f6afcc8b

[jamshally]

@benjamn - I have just verified that this issue is resolved as of @apollo/[email protected]. Thanks!

[hwillson]

Thanks for confirming @ahrnee!