title: How to query from Apollo cache not having the query on ROOT_QUERY
body: <p>I need to implement a list of nested items (tasks), every task should be editable, like this</p>
  <p><a href="https://i.stack.imgur.com/CdiZL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CdiZL.png" alt="enter image description here" /></a></p>
  <p>I've got two variants of how to do it with React/Apollo/GraphQL:</p>
  <p><strong>1. useQuery for every task separately</strong></p>
  <p>This works well but lots of queries for every task separately</p>
  <p><strong>2. 2 queries: 1 to fetch all tasks from the server, 1 to get one from the CACHE</strong></p>
  <p>My idea is that somewhere in the parent component I'd fetch all available tasks, like this:</p>
  <pre><code>const TASKS_NESTED = gql`
      query TaskWithNestedChildren($taskId: String!) {
          taskWithNestedChildren(taskId: $taskId) {
              _id
              name
              children {
                  _id
              }
          }
      }
  `;
  
  const ParentComp = () =&gt; {
      const { data } = useQuery(TASKS_NESTED, {
          variables: { taskId: parentTaskId },
      });
  </code></pre>
  <p>This would write all tasks into the cache</p>
  <p>And in my child component I'd get task's data from the cache, like this</p>
  <pre><code>const TASK = gql`
      query Task($taskId: String!) {
          task(taskId: $taskId) {
              _id
              name
              children {
                  _id
              }
          }
      }
  `;
  
  const Task = ({...}) =&gt; {
  
      const { data, loading } = useQuery(TASK, {
          variables: { taskId },
          fetchPolicy: 'cache-only',
      });
  </code></pre>
  <p>it doesn't load every Task from the Cache, it says:</p>
  <blockquote>
  <p>Can't find field 'task' on ROOT_QUERY object</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/zdxBs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zdxBs.jpg" alt="enter image description here" /></a></p>
  <p>here's my schema on Node.js side</p>
  <pre><code>type Query {
      task(taskId: String!): Task
      taskWithNestedChildren(taskId: String!): [Task]
  }
  </code></pre>
  <p>which means the <code>taskWithNestedChildren</code> returns array of tasks-Objects and <code>task</code> returns one Task object</p>
  <p><strong>POSSIBLE SOLUTION 1</strong>
  In child component get task data from the cache using <code>client.readFragment</code>.</p>
  <pre><code>const task = client.readFragment({
      id: `Task:${taskId}`,
      fragment: TASK_FRAGMENT,
  });
  </code></pre>
  <p>The problem with this approach is that Task (Child) component is not subscribed to any cache changes, and when the cache is updated the Component is not rerendered.</p>
  <p>Any other solutions?</p>