Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Query action takes more time than plain fetch request #394

Open
igor90 opened this issue Oct 11, 2022 · 1 comment
Open

Query action takes more time than plain fetch request #394

igor90 opened this issue Oct 11, 2022 · 1 comment
Assignees
Labels
question Further information is requested
Milestone

Comments

@igor90
Copy link

igor90 commented Oct 11, 2022

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?

@Benz19
Copy link
Collaborator

Benz19 commented Nov 4, 2022

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

@Benz19 Benz19 added the question Further information is requested label Nov 4, 2022
@jesse-savary jesse-savary added this to the v0.18.0 milestone Nov 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
Development

No branches or pull requests

3 participants