Typescript/Apollo: access property from in memory cache

user_3908551 0
Viewed 3168

I'm using Apollo Client and am learning Typescript. I have a Mutation component with this update prop:

(cache, { data: { createTask } }) => {
    const allTasks = cache.readQuery({ query: ALL_TASKS }).allTasks;
}

I get two compilation errors:

Object is possibly 'null'.
Property 'allTasks' does not exist on type '{}'.

I understand the general idea. readQuery might return null (which is it self confusing because the docs lead me to believe that an error is thrown when no results are found (https://www.apollographql.com/docs/react/advanced/caching.html#readquery).

How can I get the compiler to let me read the property allTasks from the result of readQuery?

Also, FYI I tried running console.log(cache.readQuery({ query: ALL_TASKS })) and confirmed that there is indeed valid data there with a property called.

apollo-client react-apollo typescript
1 Answers

readQuery accepts a type argument for the type of the result; you can see this in the source code or by jumping to the declaration of readQuery in your IDE. Thus, you can do:

interface AllTasksResult {
  allTasks: any;  // TODO: Put correct type here
}
// ...
const allTasks = cache.readQuery<AllTasksResult>({ query: ALL_TASKS })!.allTasks;

About the null: Consider filing a bug for the inconsistency between the type declarations and the documentation. For now, the exclamation mark claims that you know the preceding expression (the return value of readQuery) won't be null or undefined.

user_44686170
Related