wora icon indicating copy to clipboard operation
wora copied to clipboard

No initial query from server

Open Twisterking opened this issue 6 years ago • 6 comments

Hi @morrys !

Thanks again for this awesome package! I need your help ... again.

Following situation:

  • 2 apps: one main app running MongoDB and a react-app, second app running react and your apollo-offline package and all that
  • second app navigates to React component viewing some documents via a standard <Query/> - documents matching the query are displayed and cached - all good!
  • second app navigates to another view
  • main server inserts some documents into a mongoDB collection also matching the query used by the second app in the <Query/> component
  • after this insert, the second app navigates to the same <Query/> view again - the new inserts do not show up! The <Query/> still only shows the results in the cache, but is NOT querying the server again to get the the just inserted new documents.

To put it a bit differently: For some reason your Apollo client seems to NOT query the server after mounting a new <Query/> of some sort, it always just shows the documents from the cache. If the server data updated since this cache was saved, these changes do NOT show up.

What the hell am I doing wrong? 😢

Twisterking avatar Jan 09 '20 13:01 Twisterking

hi @Twisterking, this is caused by the Query network policies .. by default Apollo uses cache-first: https://www.apollographql.com/docs/react/api/react-apollo/#optionsfetchpolicy

In version 2 of apollo-client there are no invalidation logics of cache elements (they are integrating it in version 3)

so, you can evaluate these three options:

  • add subscriptions to your application
  • change the fetchPolicy (e.g. cache-and-network)
  • implement your own cache cleaning policy

morrys avatar Jan 09 '20 14:01 morrys

Thanks a bunch for your very quick answer! 😃 I am running with subscriptions, but for some reason these work horribly inconsistent for me. After mounting my special Query-component including subscription, only changes after the component was mounted are updated via the subscription! Everything that happened before I can only get via calling refetch().

Twisterking avatar Jan 09 '20 14:01 Twisterking

I'm considering implementing sync logic (like https://docs.aws.amazon.com/appsync/latest/devguide/tutorial-delta-sync.html) but I'm waiting for the official release of apollo-client 3.0 and to have multiple use cases to create a good implementation.

morrys avatar Jan 09 '20 14:01 morrys

Okay thank you very much! You already helped me a lot with the FetchPolicy! 😃

I have one more problem you might be able to help me with:

  • I have two pretty much identical react components using my <ReactiveQuery/> component: https://github.com/Twisterking/meteor-graphql-test/blob/v0.2.2-grapher/imports/ui/reactiveQuery/ReactiveQuery.js
  • big difference is, that one is wrapped with many other complex components, the other is part of a very simple "Test page".
  • The one with the many wrapped components/parents has broken subscriptions, the one on the test page work.

What confuses me the most is the following: Both use the exact same query, subscription and variables ... on my server I have the following code:

listbody: {
  // https://github.com/cult-of-coders/apollo-live-server#creating-subscriptions
  resolve: ({ event, doc }, args, context, ast) => {
    console.log('listbody sub resolve:', { event, doc, args });
    doc.__typename = 'ListElement';
    if(event == 'added' || event == 'changed') {
      Object.assign(doc, {
        item: Items.findOne(doc.itemId)
      });
    }
    return { event, doc };
  },
  subscribe(_, args, context, ast) {
    const { listId, limit, skip } = args;
    console.log('SUB listbody args:', args);
    const observable = ListsBody.find({ list_id: listId });
    return asyncIterator(observable, {
      sendInitialAdds: true
    });
  }
}

when I have my broken component mounted, the console.log('listbody sub resolve:') is not displayed, when I have my working component mounted in the client the console.log does show up.

Can you please explain to me how this is possible? I thought that server-side code should basically be independent of which components are mounted on the client. I just don't understand what I am doing wrong! 😢

PS: If you maybe cloud have a quick look via skype/teamviewer, I would be so so grateful!

Thanks a bunch yet again mate!

Twisterking avatar Jan 09 '20 14:01 Twisterking

have you verified that both components in the network made the same request? today I can't because I'm sick at home: D

to organize us you can write me on slack: graphql.slack.com

morrys avatar Jan 09 '20 14:01 morrys

I can't ... using websockets/DDP with https://github.com/Swydo/ddp-apollo :-( This is all so incredibly difficult to debug 😬 Thanks a bunch, I will write to you in slack!

Twisterking avatar Jan 09 '20 14:01 Twisterking