Apollo-client: Offline usage

[cdroulers]

Hello,

I've started experimenting with Apollo-client with my GraphQL Server to understand how it works and see if it can work for my offline needs. So far, I've been able to store the redux state into localStorage and read it on page load. It seems to then be able to show the page (on refresh) without hitting the server.

Though when I refetch() a query, it still hits the GraphQL Server even though the data is in the store and forceFetch is false. Am I using the API wrong?

Is there a guide on getting offline first to work? Or just anything that could point me in the right direction to understanding what's going on better?

[stubailo]

refetch is _only useful_ for the case where you need to fetch from the server. What are you trying to use refetch for?

[cdroulers]

For running a query when a variable changes. I have a simple input field and I want to query the data with the value whenever it changes. I read http://docs.apollostack.com/apollo-client/react.html#connect and couldn't figure out how to trigger the fetching of data. I tried to modify the redux state, but the function in mapQueriesToProps wasn't triggered. Maybe I missed something?

[stubailo]

@cdroulers queries should automatically refetch when the variable changes. React apollo compares the variables and queries before and after a state change, and reruns them if they are different.

Do you have a code sample by any chance? It sounds like what you're doing should work really well, but perhaps there is a small bug.

[stubailo]

By the way, if we get this working, it would be awesome to get some more info about how you are persisting the state, since I bet a lot of people would be interested in this kind of offline strategy!

[luandro]

It would be awesome to have at least some documentation on offline first strategy.

[cdroulers]

I'll make a repro over the weekend!
On 23 Jun 2016 5:05 p.m., "Sashko Stubailo" [email protected]
wrote:

@cdroulers https://github.com/cdroulers queries should automatically
refetch when the variable changes. React apollo compares the variables and
queries before and after a state change, and reruns them if they are
different.

Do you have a code sample by any chance? It sounds like what you're doing
should work really well, but perhaps there is a small bug.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/apollostack/apollo-client/issues/307#issuecomment-228183514,
or mute the thread
https://github.com/notifications/unsubscribe/AArQvm23zBsQrQ4YI8Qhbu2mnhHj1NG3ks5qOvT8gaJpZM4I9OOR
.

[stubailo]

@cdroulers that would be amazing!

@luandro I agree, I think you can already do some really great stuff, but it's not well explained or documented.

[luandro]

Is something like PouchDB/CouchDB sync possible with Apollo?

[stubailo]

@luandro can we open a new thread about this? I sense it's not the same topic as the original post.

[luandro]

Yea sure. We should discuss offline first more in depth in order to consolidate solid strategies.

[cdroulers]

@stubailo So if I understand correctly (before I start my repro case), to have it query automatically, I have to change the redux state so the mapQueriesToProps function is called anew?

Seems overkill to update the redux state just for a search string (or any other "local" changes in a page), but I'm not that familiar with redux philosophy yet!

[stubailo]

@cdroulers if you change the props of the component, change the redux state, or load a new query from the server, it should re-query.

So you can either keep the search string in redux, in the state of the parent component, or anywhere else and then pass it in as props. Redux is specifically designed for local state so it does make sense, but you don't need to use it if you don't want to!

[cdroulers]

@stubailo I've been able to get it to work starting with the apollo-demo (adding a $page parameter to the query). I'll see tomorrow about getting it to work with my use-case.

Although I still have an interrogation on this point; would it be possible to use the component's state to set variables instead of only props or redux state? For example, paging. I added a "more" button at the bottom of the feed. When clicking, I increment the page. Since I persisted the redux store, the page number remains 2 on a page reload, which isn't really what I want! Same with if I had a text box for searching. I don't consider the input string to be the actual state. At best, I'd push the string as a query string parameter in the URL and not in application state. Maybe I'm misunderstanding something here!

[stubailo]

@cdroulers there are some pretty good points here:

1. If you persist the redux store as a way to use apollo offline, that will also persist your temporary state if they are in the same store, which is annoying
2. Often, you want a component to change its own query, for example setting a different page or filter on its own data

Specifically, (1) means that it's not always convenient to use one store for server data and client data, and (2) means that it's inconvenient that inputs to the query can only come from outside the component that is using that data. I think we should eventually solve both.

(1) is probably solved by making an easy way for people to persist just the apollo part of the store, for people who want to use Redux for their client data.

(2) can be solved by allowing the child to set variables. You can already do this via refetch, so perhaps there should be an analogue to refetch just called setVariables or something. I think there is already a feature request for this: #272

So I think the best option for now @cdroulers is to wrap the component, like so:

<PageNumberContainer>
  <connect>
    <ViewComponent>
  </connect>
</PageNumberContainer>

That way, PageNumberContainer can manage the page number as local state, and pass that down into the connect container via props. ViewComponent can call a callback setPageNumber, which will set the state on PageNumberContainer.

Would that work for now?

[cdroulers]

@stubailo

1. I could (should) selectively store the state instead of just everything, that would work well.
2. I agree with a setVariables method. I think there would be a lot of uses for it.

Having to create an action and reducer to manage local state seems overkill and lots of boilerplate.

I'll look into my problem some more and post a repro if it doesn't work!

[cdroulers]

It seems I only needed to use mapStateToProps for apollo to pick up my changes to the redux store. Once I did that, I got everything working.

It wasn't obvious to me from the docs that this was a requirement!

[stubailo]

@cdroulers how could we best document this? Where would you look for information like this?

[cdroulers]

I'd at least mention in http://docs.apollostack.com/apollo-client/react.html#using-with-redux that if variables from the state are used in the queries, they need to be mapped in the mapStateToProps function. Otherwise, it kind of looks like black magic!

[funkyeah]

@cdroulers @stubailo this thread kind of quickly went the direction of looking at specific bug rather than the more general topic the title implies?

Should the discussion of offline usage continue here or new issue? Or maybe that's too broad a topic in the first place... I'm particularly interested in persisting data and then pre-loading / re-hydrating. Does Apollo work particularly well with any existing solutions?

• https://github.com/michaelcontento/redux-storage
• https://github.com/rt2zz/redux-persist
• https://realm.io/news/introducing-realm-react-native/

[stubailo]

@funkyeah I think Apollo probably works with all of them. Perhaps you could give it a try and come back if it doesn't work?

I think this is a good place to talk about, but the general phrase "offline data" is not really specific enough. Perhaps we can open another issue about persisting data across reloads?

[Poincare]

Conversation is now off-topic; we should probably open a new issue about the data reloading across pages.