Open iyobo opened 5 years ago
This is my UserStore
import {action, observable} from 'mobx';
import {getAvatar} from '../utils/imageUtils';
import {AuthMode} from '../components/auth/AuthComponent';
import {BaseStore, getOrCreateStore} from 'next-mobx-wrapper';
import {getUIStore} from './UIStore';
const axios = require('axios');
interface User {
picture: string;
id: string;
firstName: string;
lastName: string;
email: string;
phone?: string;
}
export class UserStore extends BaseStore {
@observable currentUser: User;
@observable isShowingAuthModal: boolean = false;
@observable authMode: string = AuthMode.LOGIN;
...
/**
* Call this in the root store init function
*/
async me() {
const uiStore = getUIStore();
uiStore.incrementLoadCount();
const res = await axios.get('/api/v1/users/me');
uiStore.decrementLoadCount();
this.currentUser = res.data;
}
...
}
export const getUserStore = getOrCreateStore('userStore', UserStore);
Hi @iyobo You can try changing this:
//load user profile
const userStore = stores.getUserStore();
await userStore.me();
to
const {userStore} = ctx.store;
//load user profile
await userStore.me();
@nghiepit Still doesn't work.
Maybe the problem is async/await
.
try:
runInAction(() => {
this.currentUser = res.data;
})
I recommended flows
instead.
I doubt that's the issue. strict mode is off. Action encapsulation not needed.
On the server
In getInitialProps(), after the line
await userStore.me();
, a change happens in the userStore with a value set. (async call to backend server to grab profile information and store it in userStore)I verify that the value is set using a breakpoint after that line.
However in the same server-side, when it gets to the render function, there is no profile information in userStore.
Breakpoints tell me that
await userStore.me();
and the profile data gets set BEFORE the render function gets called, so its is not a matter of async mis-order.