mobxjs / mst-gql

Bindings for mobx-state-tree and GraphQL

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Query action takes more time than plain fetch request

igor90 opened this issue · comments

Hey
I have project similar to 3-twitter-clone example.
I create a couple of seperated stores and injected them in rootStore:

const RootStoreInferred = RootStoreDefault.props({
  trendsStore: types.optional(
    types.late((): IAnyModelType => TrendsStore),
    {}
  ),
})

then I create seperate hook to get that store
export const useTrendsStore = (): ITrendsStore => useQuery().store.trendsStore;

And in compontent I use
const trendsStore = useTrendsStore();

Here is the action from trendsStore

    makeTrendsSearch: flow(function* (values: ITrendsSearchFormValues) {
      try {
        applySnapshot(self, {});
        self.setLoading();

        const payload = {
          ...values,
          topicSorting: getCorrectSortingByDateRange(values),
        };

        const preparedQuery = replaceEnumValuesInQuery(cleanBrackets<ITrendsSearchFormValues>(payload));
        const queryFragment = addQueryToFragment(QUERY_TRENDS_FRAGMENT, 'trendsOverview', preparedQuery);
        var start = performance.now();
        const response = yield self.store.queryNews({}, queryFragment, { fetchPolicy: 'no-cache' }).promise;
        var duration = performance.now() - start;
        console.log(duration);
        const trendsOverviewResponse: TrendsOverviewOutputUnion = response.news.trends.trendsOverview;
        if (trendsOverviewResponse.__typename === 'TrendsOverviewOutputOutputSuccess') {
          self.setDone();
        } else {
          self.setError();
          self.store.toastStore.addToast(trendsOverviewResponse.__typename as ErrorTypes);
        }
      } catch (error) {
        self.setError();
        self.store.toastStore.addToast(getUnexpectedErrorMessage(error));
      }
    }),

Here is the store view to get rootStore in trendsStore

  .views((self) => ({
    get store() {
      return getRoot<IRootStore>(self);
    },
  }))

And when I call makeTrendsSearch, request time from network tab is 3 seconds, but here in console.log it can be 3.8-4.5seconds
It means it takes 1 second more then real request.

Also I tried to change this
const response = yield self.store.queryNews({}, queryFragment, { fetchPolicy: 'no-cache' }).promise;
to plain fetch, and it show the same time as network tab

Yes, i know the queryNews is converting respoinse to mst model, but still.

My questions are:
How can I improve the code to have the same time as in network tab?
Is it correct using mst-gql in general to have shared data between stores?

HI @igor90... Im helping @jesse-savary with these issues and I'll try to act as a community manager to get things back on track... If you need anything let me know