Examples

[luandro]

Could you please provide an example?

[PaulBrachmann]

@luandro I'd be happy to provide you with additional examples.

I'm assuming you looked at the examples given in the README. What further scenarios should be demonstrated? Are the existing examples unclear?

[tomsowerby]

Personally, when first using the library, some more info on when update, optimisticResponse etc are called during the lifecycle. Also from looking at the code is a callback function available somehow? I'm slowly figuring these things out but some more extreme examples might help still.

[PaulBrachmann]

@tomsowerby Thank you!

Lifecycle Apollo-Offline does not change Apollo's basic query/mutation functionality.

This means whenever you are sending a GraphQL mutation, Apollo first responds with the given optimisticResponse and later (once it is available) with the actual server response.
Therefore the update function (if provided) is called twice (using the optimistic and actual response).

For more detailed information you can refer to Apollo's technical documentation: Updating the cache after a mutation

I also recommend reading Full-stack React + GraphQL Tutorial, especially parts 4 and 5 if you are not yet familiar with the matter.
You can basically follow along those articles and just change your setup according to Apollo-Offline's README. Additionally you may want to use the optimistic fetch feature as described in the README (set options.fetchPolicy to 'network-only' and add __offline__: true to the query's variables).

Callback Could you please be more specific in where you want to hook up a callback to?

A few more words on how Apollo-Offline works Apollo-Offline only intercepts all queries/mutations just before they are sent to your backend and queues them for execution once the server is reachable (which may be immediately).
(Additionally it also handles persisting the local cache, implements optimistic responses for queries via the optimistic fetch feature, and signals store rehydration.)

[luandro]

Hey @MLPXBrachmann,

it would be awesome to have something we could just run git clone, npm i and npm start and see it working. The README lacks some minor details that make it a little confusing to follow.

If you wouldn't want to include these in this repo, I'd me happy to make a separate repo containing some examples (React, React-Native, different offline-first strategies).

[PaulBrachmann]

Hi @luandro,

thanks a lot for sharing your thoughts! I really like the idea of having multiple repos containing production-ready examples for different environments.

I'm going to start working on a first one tomorrow.
I suppose the usual ToDo app is in order?

Here 's the proposed technology stack:

• Client
  • apollo-offline
  • react
  • react-apollo
  • react-router-dom
  • react-typestyle-preset
  • theming
  • typescript
  • jest
  • enzyme
  • tslint
  • webpack
• Server (node.js)
  • apollo-server-express
  • typescript
  • jest
  • tslint
  • webpack

What do you think?

[luandro]

It's nice to have production ready setups, but I was thinking more in the lines of simplicity, like redux-offline-examples.

No need for testing or even a backend for most examples. Just simple one file js files that can be easily installed and tested.

[PaulBrachmann]

@luandro Of course I will keep it as simple as possible - but as complex as necessary.

Maybe "production ready" was a bit misleading... I did not mean I was going to build a fully production ready app as an example, but rather an example that could be used as a boilerplate for building production ready apps.

Thus I want to show how all of the different components making up an offline-first app come together.
E.g. as for testing, I'm not exactly going to go for a 100% coverage. It's more to demonstrate the overall technique and how it fits in here.

[tomsowerby]

I've been working on an "offline first" application that involves authentication. Using redux-offline and hopefully using apollo-offline too. I'll share if I get it all working. The main concern that I face with it now is delaying certain server requests until both online AND valid auth is present. I'm exploring extra effect types at the moment.

[luandro]

Sounds awesome @MLPXBrachmann and @tomsowerby, I'm eager to see all the super powers apollo-offline can offer.

I'll leave this open until some examples pop-up. Cheers!

[PaulBrachmann]

I just finished a very basic ToDo list example. It also features an attempt at secure authentication.

Here is the repo: apollo-offline-examples

Any suggestions and contributions regarding the documentation or features of these examples, as well as additional ones, are highly appreciated!

[TheoMer]

@MLPXBrachmann Any chance you can provide any example information as to how to integrate apollo-offline into a VueJS project?