Usage/Pattern confusion over retrieving from a Map

[scottwillman]

Hi fantastic mobx community, this will hopefully be a simple usage/pattern answer for someone but it is alluding me.

Synopsis:

• A single store with a Map of tasks.
• Task cmpts that each load their own data and interact with their Map value from the cache. (tasks are only retrieved from the server as their parents expand)

Questions:

1. Since I must use a Map.get method to retrieve the value from my store (this.__taskCache.get(taskId)), in the component do I store that in a variable as I've done below or do I recall taskStore.getTask({ taskId }) whenever I need it? Will storing it in a new variable break observability?
2. If I would like to change a property value of a task (Map entry) in the store from the component, should I change the property on the retrieved variable (as in question Fix typo: combing -> combining #1), do I need to get and set back to the Map each time, or should I write getters and setters for each property of the Task entries from the Map?

stores/TaskStore.js

import { makeAutoObservable, flow, autorun } from 'mobx';
import { GraphQLClient } from 'graphql-request';
import { TASK } from '../queries';

const ENDPOINT = 'http://localhost:8080/api';

const LOCAL_PROPERTIES = {
    showChildren: false,
};

class TaskStore {
    __taskCache = new Map();

    constructor() {
        this.__client = new GraphQLClient(ENDPOINT, { credentials: 'include' });
        makeAutoObservable(this, {
            loadTask: flow,
        });
        autorun(() => console.log(this.__taskCache.toJSON()));
    }

    *loadTask({ taskId }) {
        try {
            const variables = { taskId };
            const data = yield this.__client.request(TASK, variables);
            const taskWithLocalProps = { ...data.task, ...LOCAL_PROPERTIES };
            this.__taskCache.set(taskWithLocalProps._id, taskWithLocalProps);
        } catch (error) {
            throw Error(error);
        }
    }

    getTask({ taskId }) {
        return this.__taskCache.get(taskId);
    }
}

export default TaskStore;

stores/index.js

import React from 'react';
import TaskStore from './TaskStore';

const storesContext = React.createContext({
    taskStore: new TaskStore(),
});

export const useStores = () => React.useContext(storesContext);

Task.js

import React, { useEffect } from 'react';
import { useStores } from './stores';
import ChildTask from './Task.js';

const Task = ({ taskId }) => {
    const { taskStore } = useStores();

    useEffect(() => {
        taskStore.loadTask({ taskId });
    }, []);

    const task = taskStore.getTask({ taskId });

    return (
        <div className="Task">
            <span>{task.name}</span>
            <button onClick={() => (task.showChildren = !task.showChildren)}>Show/Hide</button>
            {task.showChildren ? (
                <div className="Task__children">
                    {task?.children.map(childTask => (
                        <ChildTask taskId={childTask._id} />
                    ))}
                </div>
            ) : null}
        </div>
    );
};

export default Task;

[scottwillman]

I think I can answer my own questions here in case it helps anyone (or I've got it wrong):

1. If I retrieve the task early in the cmpt and store it in a const variable, at worst it will be retrieved on every refresh of the cmpt. It is still better than retrieving it wherever it's used.
2. Yes, due to references, the observable in the store will be updated when a property on the new variable is changed.