MobX State Tree async actions and re-rendering React component

Question

I am new to MST and is having a hard time finding more examples with async actions. I have an api that will return different data depending on the params you pass to it. In this case, the api can either return an array of photos or tutorials. I have set up my initial values for the store like so:

data: {
   photos: [],
   tutorials: []
}

Currently, I am using applySnapshot to update the store and eventually, that will trigger a re-render of my React component. In order to display both photos and tutorials, I need to call the api twice (Once with the params for photos and the second time for tutorials). I am running into an issue where the snapshot from the first update shows that photos and tutorials have the same values and only on the second update, do I get the correct values. I am probably misusing applySnapshot to re-render my React components. I would like to know the better/proper way of doing this. What is the best way to re-render my React components after the api has yielded a repsonse. Any suggestions are much appreciated

I have set up my store like this:

import { RootModel } from '.';
import { onSnapshot, getSnapshot, applySnapshot } from 'mobx-state-tree';

export const setupRootStore = () => {
  const rootTree = RootModel.create({
    data: {
      photos: [],
      tutorials: []
    }
  });
  // on snapshot listener
  onSnapshot(rootTree, snapshot => console.log('snapshot: ', snapshot));

  return { rootTree };
};

I have created the following model with an async action using generators:

import {types,Instance,applySnapshot,flow,onSnapshot} from 'mobx-state-tree';

const TestModel = types
  .model('Test', {
    photos: types.array(Results),
    tutorials: types.array(Results)
  })
  .actions(self => ({
    fetchData: flow(function* fetchData(param) {

      const results = yield api.fetch(param);

      applySnapshot(self, {
        ...self,
        photos: [... results, ...self.photos],
        tutorials: [... results, ...self.tutorials]
      });
    })
  }))
  .views(self => ({
    getPhoto() {
      return self.photos;
    },
    getTutorials() {
      return self.tutorials;
    }
  }));

const RootModel = types.model('Root', {
  data: TestModel
});

export { RootModel };

export type Root = Instance<typeof RootModel>;
export type Test = Instance<typeof TestModel>;

React component for Photos.tsx

import React, { Component } from 'react';
import Spinner from 'components/Spinner';
import { Root } from '../../stores';
import { observer, inject } from 'mobx-react';

interface Props {
  rootTree?: Root
}

@inject('rootTree')
@observer
class Photos extends Component<Props> {

  componentDidMount() {
      const { rootTree } = this.props;
      if (!rootTree) return null;
      rootTree.data.fetchData('photo');
  }

  componentDidUpdate(prevProps) {
    if (prevProps.ctx !== this.props.ctx) {
      const { rootTree } = this.props;
      if (!rootTree) return null;
      rootTree.data.fetchData('photo');
    }
  }

  displayPhoto() {
    const { rootTree } = this.props;
    if (!rootTree) return null;
    // calling method in MST view
    const photoResults = rootTree.data.getPhoto();

    if (photoResults.$treenode.snapshot[0]) {
      return (
        <div>
          <div className='photo-title'>{'Photo'}</div>
          {photoResults.$treenode.snapshot.map(Item => (
            <a href={photoItem.attributes.openUrl} target='_blank'>
              <img src={photoItem.url} />
            </a>
          ))}
        </div>
      );
    } else {
      return <Spinner />;
    }
  }

  render() {
    return <div className='photo-module'>{this.displayPhoto()}</div>;
  }
}

export default Photos;

Similarly, Tutorials.tsx is like so:

import React, { Component } from 'react';
import Spinner from '';
import { Root } from '../../stores';
import { observer, inject } from 'mobx-react';

interface Props {
  rootTree?: Root;
}

@inject('rootTree')
@observer
class Tutorials extends Component<Props> {

  componentDidMount() {
    if (this.props.ctx) {
      const { rootTree } = this.props;
      if (!rootTree) return null;
      rootTree.data.fetchData('tuts');
    }
  }

  componentDidUpdate(prevProps) {
    if (prevProps.ctx !== this.props.ctx) {
      const { rootTree } = this.props;
      if (!rootTree) return null;
      rootTree.search.fetchData('tuts');
    }
  }

  displayTutorials() {
    const { rootTree } = this.props;
    if (!rootTree) return null;
    // calling method in MST view
    const tutResults = rootTree.data.getTutorials();

    if (tutResults.$treenode.snapshot[0]) {
      return (
        <div>
          <div className='tutorials-title'>{'Tutorials'}</div>
          {tutResults.$treenode.snapshot.map(tutorialItem => (
            <a href={tutorialItem.attributes.openUrl} target='_blank'>
              <img src={tutorialItem.url} />
            </a>
          ))}
        </div>
      );
    } else {
      return <Spinner />;
    }
  }

  render() {
    return <div className='tutorials-module'>{this.displayTutorials()}</div>;
  }
}

export default Tutorials;

Answer 1

Why are you using applySnapshot at all in this case? I don't think it's necessary. Just assign your data as needed in your action:

.actions(self => ({
     //If you're fetching both at the same time
    fetchData: flow(function* fetchData(param) {

      const results = yield api.fetch(param);

      //you need cast() if using Typescript otherwise I think it's optional
      self.photos = cast([...results.photos, ...self.photos])
      //do you really intend to prepend the results to the existing array or do you want to overwrite it with the sever response?
      self.tutorials = cast(results.tutorials)

    })
  }))

Or if you need to make two separate requests to fetch your data it's probably best to make it two different actions

.actions(self => ({
    fetchPhotos: flow(function* fetchPhotos(param) {
      const results = yield api.fetch(param)
      self.photos = cast([... results, ...self.photos])      
    }),
    fetchTutorials: flow(function* fetchTutorials(param) {
      const results = yield api.fetch(param)
      self.tutorials = cast([... results, ...self.tutorials])      
    }),
  }))

Regardless, it doesn't seem like you need applySnapshot. Just assign your data in your actions as necessary. There's nothing special about assigning data in an async action.