title: Error: [mobx-state-tree] Failed to resolve reference XXX to type 'User'
body: <h3>Context</h3>
  
  <p>I have a React application that is backed by mobx-state-tree (MST). One of the pages makes two <strong>parallel</strong> API calls to fetch a list of <code>Projects</code> and a list of system <code>Users</code>.</p>
  
  <p>The responses of these two APIs are then applied as snapshot to two sibling nodes in the same tree. The Project model's owner field refers to a User model.</p>
  
  <p>My problem is that the GET project API call often completes earlier than the GET Users API call. Classic "race condition". So, when MST tries to dereference an owner value, the user with such identifier is not available in the tree and I'm getting a run time error like this:</p>
  
  <blockquote>
    <p>Error: [mobx-state-tree] Failed to resolve reference 'dtGNbVdNOQIAX0OMGaH2r2oSEf2cMSk9AJzPAf4n7kA' to type 'User' (from node: /projectListStore/projects/0/owner)</p>
  </blockquote>
  
  <h3>Question</h3>
  
  <p><strong>How do I work around the error?</strong></p>
  
  <p><strong>Please notice that</strong> making the API calls depend on each other (<code>await</code> or <code>users.load().then(users =&gt; { projects.load(); }</code>) are not an option for our project.</p>
  
  <h3>MST Models</h3>
  
  <pre><code>export const ProjectModel = types
    .model('Project', {
      projectId: types.optional(types.identifierNumber, 0),
      title: '',
      descriptionStatus: '',
      projectStatus: '',
      startDate: CustomDate,
      endDate: CustomDate,
      owner: types.maybeNull(types.reference(User)), // -----
    })                                                        \ 
    // ...                                                     |
                                                               |
  export const User = types                                    |
    .model('User', {                                          /
      userId: types.identifier,                      // &lt;&lt;&lt;--
      userName: '',
      firstName: '',
      lastName: '',
      email: '',
      lastVisited: CustomDate,
    })
    // ...
  </code></pre>
  
  <h3>API example</h3>
  
  <p><code>GET</code> <code>https://service.com/api/users</code></p>
  
  <pre><code>[
    {
      "userId": "g-gqpB1EbTi9XGZOf3IkBpxSjpAHM8fpkeL4YZslEL8",
      "userName": "john.doe@service.com",
      "firstName": "John",
      "lastName": "Doe",
      "email": "john.doe@service.com",
      "lastVisited": "2018-01-18T17:32:48.947"
    },
    {
      ...
    },
    ...
  ]
  </code></pre>
  
  <hr>
  
  <p><code>GET</code> <code>https://service.com/api/workmanagement/projects?minStartDate=&amp;maxStartDate=2018-11-24&amp;status=Active</code></p>
  
  <pre><code>[
    {
      "projectId": 1,
      "title": "Project Title",
      "description": "Praesent luctus vitae nunc sed condimentum. Duis maximus arcu tortor, vitae placerat enim ultrices sed. Etiam scelerisque gravida justo, vitae venenatis dui pellentesque eu.",
      "projectStatus": "active",
      "startDate": "2018-08-20T00:00:00",
      "endDate": "2019-07-01T00:00:00",
      "owner": "g-gqpB1EbTi9XGZOf3IkBpxSjpAHM8fpkeL4YZslEL8",
    },
    {
      // ...
    },
    ...
  ]
  </code></pre>