integration with ngrx

[olaf89]

Hi!

Is it possible to integrate apollo client with ngrx instead of redux?

Thanks in advance!

[helfer]

@olaf89 in theory it shouldn't be too hard to integrate it with ngrx. The only code that would have to be modified is the place where Apollo client writes to the store with reducers and then the place where it reads from the store. We might abstract it at some point in the future, so people can plug in their own preferred state store with relatively little effort.

[SebastianSchenk]

any updates on that topic?

[DxCx]

@helfer i think that this is the correct aproach, wanted to ofer it myself then ive seen this (abstracting store)

[helfer]

@SebastianSchenk We haven't done any work specifically to make it possible, but i did discuss this with Sashko and we concluded that the easiest way to do this would be to assume that the store is a redux store and then build adapters for other stores.
Are there features that ngrx/store has, which redux doesn't?

[nakedcity]

any update on this one?

[SebastianSchenk]

@helfer ngrx/store is basically a re-implementation of redux using observables. In addition, it plays nicely with angular2's dependency injection. From what I've read so far, it seems to me that ngrx/store is the best way to use Redux in angular2 applications.

However, isn't it a common use case to switch the store? I mean, if someone is using react for example, he most likely will use redux already. If this user is not able to pass his own store to apollo, he will end up having two stores, which is not recommended according to Redux documentation.

[DxCx]

IMO we just need to let the user provide the store.

[nakedcity]

@DxCx #61 is this one what you meant?

[DxCx]

This is redux only,
What i mean is that we need to define store interface and then pass any existing store (which implements the interface) to it..

[helfer]

Can the store interface just be the redux interface? That's what we have now.

[nakedcity]

This is the ngrx store https://github.com/ngrx/store/blob/master/src/store.ts

https://github.com/reactjs/redux/blob/85e2368ea9ff9b308fc873921ddf41929638f130/docs/api/Store.md I think ngrx store interface is missing the getState function

[MikeRyanDev]

@helfer I am a core maintainer of @ngrx/store. Let me know what APIs we need to expose to make integration possible.

[nakedcity]

I see this one is still not assigned to anyone if you need help let me know too

[helfer]

@MikeRyan52 I just talked to @stubailo and it seems all we really need is the equivalent of store.getState, store.subscribe and store.dispatch. Apollo Client uses a middleware to know when the store has updated, but that could be done in a different way.

I think the easiest way would be if someone wrote a thin adapter for ngrx/store that just maps the methods we need to the ones that ngrx/store exposes. Any thoughts?

[MikeRyanDev]

@helfer We can cast ngrx/store to that interface. We will need to find a suitable location for that code to live.

[hongbo-miao]

I will try to see whether I can build a demo first using existing Angular2-Apollo and ngrx API, like how I wrap Angular2-Meteor API and use with ngrx before.
In the meanwhile, if someone has time, definitely welcome to try it, thanks! : )

[hongbo-miao]

Okay, after my first try, Apollo and ngrx can work well together (just tried basic Apollo API). Only found some small issues. And there are something I am not clear. I will ask Uri first, and then publish codes later. So please be patient.

[dogancana]

Hey, any updates on this one?

[helfer]

@dogancana I don't know, it hasn't come up since. @hongbo-miao did you talk to Uri and publish your code yet?

[hongbo-miao]

Oh, before I got an catch error issue for watchQuery. I will try to use latest Apollo again when I get up.

[cport1]

What steps did you take to accomplish this @hongbo-miao ?

[hongbo-miao]

I put the code here: https://github.com/Hongbo-Miao/apollo-chat
Right now only has show profile (Query) and update profile (Mutation) functions.

The two issues I met before have been fixed in latest Apollo.

For Apollo Redux store, is there a need to interact with Apollo Redux store directly? If not, we can just leave it there, and just mirror that part into ngrx(?)

UPDATE: add screenshot

[dogancana]

@hongbo-miao I didn't see how you merge two stores in there.

And with a lot of hacks I was able to combine them together. Steps are:
1- Create both stores
2- After bootstraping, create a new apollo store (createApolloStore method)
3- Change methods with @MikeRyan52 's https://gist.github.com/MikeRyan52/7a745515e48aff2c7ed1469cb0340e47 toApolloStore method
4- Pass your new store into apollo client with help of the middleware method of the client

But I wouldn't use this way. Too much hacks. And in the end, you will have two stores, one of which is not used

[hongbo-miao]

Hi @dogancana I added screenshot. I do "combine" them, but still two stores exist.

Do you mean meta reducer? Because middleware is removed since ngrx/store v2

Although right now it works. To use only one store and make it clean, the source codes/API still need to be updated.

[cport1]

Yea, I think most of us would like to have only one store.

[nakedcity]

has anyone been assigned to work on this one?

[helfer]

@nakedcity nobody is currently working on it, as far as I know.

[alexthewilde]

@Urigo here you go https://github.com/apollostack/angular2-docs/pull/30

@petercn imho ngrx/store should make itself compatible, i.e. implement the original Redux APIs where needed. That's actually what @MikeRyan52 already tried to do with his snippet. I failed to make it work myself, though I believe that for people with more insight into ngrx/store it's probably not a job that's too hard to finish.

Yet after looking more closely at ng2-redux, I wonder what the real differences are in terms of fitting "better" into Angular. Both let you use RxJS for getting data out of the store, "Effects" and "Epics" for handling of side effects as well as router state integration. That's all I really need, the rest is redux code anyway. Or am I missing something big here?

It took me less than 2 hours to migrate from ngrx/store to ng2-redux because they're so similar. I'm quite happy with this stack for now, especially since Apollo client is taking care of data normalization for me which is probably the feature I'm most excited about. Otherwise I might have ditched Redux completely and went with MobX which is way less verbose and much easier to grasp if you've not been living in Functional Programming land for the past couple of years.

[nakedcity]

I agree with @alexthewilde very similar integration plus people used to redux will not have to learn another API, regarding the plus of ngrx you can see robwormald explanation on ngrx/store#16

[Buslowicz]

Guys, now any update? Any estimates or at least when will it be started? We are picking a new stack for rewriting of our product and this would be handy. If nobody considers that a priority, we will have to pick something else...

[Urigo]

@Draccoz we do have a plan to encapsulate the store so anyone could use their own store, can't give you exact date but I believe we want to do that before 1.0.

My main question is, while planning your new stack, why is that a blocking issue?
Especially because of the fact you can still use ng-rx store for the rest of your app and integrate it through the API and also you can use ng-redux and there is a guide and example on our website

[nakedcity]

I think the double store for one app is not a good practice

[Buslowicz]

Ok, that is always some detail ^^.
I'm not saying that is a blocking issue, I was just hoping to get things done before we start rewriting core, otherwise we will think about other ways. We did want to use apollo, now did some research and found ngrx. Was just hoping to get both things connected, if not we will use just apollo probably.
If the question was about combining apollo and ngrx now, we might try, but as nakedcity said, it's not a good practice :(.

[alexthewilde]

@Draccoz give ng2-redux a try. It's giving you the same APIs as ngrx/store but can be integrated with Apollo, see this example app.

[Buslowicz]

Might do so, I am currently investigating all the options :). We stayed away from facebook official components, because of the patent clause, but just discovered Redux has no patent on it ^^.

[Urigo]

yep, hope we'll get to it soon.
Contributor week is coming soon so if someone wants to try abstracting the store of Apollo that would be great!

[calebmer]

I also want to note that we have been discussing making the internal store implementation interchangeable. Mainly our discussions revolve around interchanging a Redux store and a Vanilla-js store, but a ngrx store could be implemented by the community when we settle on an interface we like.

Stay tuned, this may not come out for a bit. In the meantime a contributor week contribution could get us where you want.

[dmatejka]

is there anything new on this topic?

[helfer]

@dmatejka This is not going to be part of 1.0, but after that we're going to start working on making the store API external so any store can be plugged in. I expect it to be ready for public testing in about three weeks to one month.

[jusefb]

Hi been looking at using Apollo with ngrx, @MikeRyan52 has any work been done on ngrx to make the two compatible? I am very happy with ngrx so far but would unfortunatly have to change to ng2-redux if it is not compatible with Apollo

[cport1]

@jusefb It has always been "compatible". This discussion is about having Apollo Client nested in the same store.

[jusefb]

I see, very sorry for asking silly questions. That is great news thank you very much.

[BhaskaranR]

@helfer any updates on this?

[helfer]

It's still on our radar but will probably take a while. Let's focus all discussion around this in #1432

[the-dr-lazy]

Hi
Does any activities on this field has been done ? If not, how can i help ?

[agborkowski]

as @helfer said observe #1432

[KevinOrtiz]

Anybody know if there is a way of work with ngrx and any other api client to make request to graph api???

[Dunos]

@KevinOrtiz you can use the apollo-angular-cache-ngrx cache package to work with ngrx but the results are much slower imo.

[KevinOrtiz]

So, you believe is possible work with apollo client and ngrx together without apollo-angular-cache-ngrx ?? @Dunos

[cport1]

not sure what you mean @KevinOrtiz ... you can just pass your graphQL responses to your stores

[danielchikaka]

@KevinOrtiz you can use the apollo-angular-cache-ngrx cache package to work with ngrx but the results are much slower imo.

Couldn't make that work. Would you mind showing us how you did it?

[johannesjo]

Is this possible now?

[danielchikaka]

Is this possible now?

Yes!

I managed to do it a year ago. It looks ugly but works.

[johannesjo]

@danielchikaka thank you very much for the reply.

It looks ugly but works.

I feared as much. For me personally it doesn't make much sense to adopt a whole new eco system without at least second class angular support.