refactor(Toggle<Component>s): Swap out the relay.store for our new Relay …

[cellis]

…2 Store

Relay 2 will use GraphQLMutation, so we should start getting on this train

Addresses #1

I would also like to know how the tracked/fat query stuff is solved by using this, but will save that question for down the road ;)

[cellis]

I will keep adding all the other Toggles to this branch, so this is a WIP

[cellis]

@nodkz getting close.

[nodkz]

@cellis let move out mutation to another pr/branch and make there some improvements.

[nodkz]

The main problem is that app/components/products/ProductConnection.js is polluted by mutation logic. In my internal app, I prefer to keep mutation inside/near Form component. It becomes more clear and better according to component approach (if we have form, we may put it anywhere and it should work).

[nodkz]

@cellis so create .env file in project root with your vars

RELAY_ENDPOINT=http://localhost:3000/northwind/

DEV_PORT= 4200
DEV_PORT_BACKEND_SERVER=4201
DEV_PORT_FRONTEND_DEV_SERVER=4202

This file listed in .gitignore so it is safe to make commits without exposing your dev vars and breaking some else setup/configuration.

It will be very useful if you try to do the same things with https://github.com/nodkz/graphql-compose-examples/blob/master/config.js As you can see there are exist env vars PORT MONGODB_URI already. So just setup correctly dotenv.

[cellis]

@nodkz how will the app/components/products/ProductConnection.js know that a new product has been added? Should I make a new graphql query in the Product connection onCreateProduct?

[nodkz]

Relay.Store on update automatically should rerender react components. The main problem is to correct pass data. Some internals about relay store http://hueypetersen.com/posts/2015/09/30/quick-look-at-the-relay-store/

Mutations has configs https://facebook.github.io/relay/docs/guides-mutations.html#mutator-configuration, which can add/remove nodes from connection. But I don't like them for me its too complicated (frankly lazy) to provide all needed data from server, so I'm using forceFetch to reload data. And for Forms I pass property onSuccess with callback which call this.props.relay.forceFetch. Sometimes I'm using fbEmitter to emit and listen changes, instead of passing prop with callback.

When Relay2 will landed I try to find simple way to add elements to connections.

[cellis]

I'm not sure how to proceed with refactoring of the product connection, tbh. I will push the WIP I have so you can see what I mean.

[cellis]

@nodkz So mutation will automatically set data? Or should I pass a callback to the CreateProduct form from ProductConnection. I'm just not sure how this relay store and environment ties everything together.

[cellis]

So I've been looking into how the Relay2Store works, and I still don't understand much, besides that this doesn't do fat/tracked queries.

I don't understand how it solves the problem of not sending unnecessary queries to the server as fat/tracked queries do, but I do understand that it's much much easier to use than writing getConfigs, and fat queries that may be hard to reason about. I know a lot of this is still being figured out as part of relay 2, but it would be nice to get your opinion on this.

The other thing is, with this store, we cannot do this.props.relay.commitUpdate(...mutation...) and have automatically props updated (right?), but we can use this in other components that aren't wrapped in relay containers, as you are suggesting here (move the mutation out into the CreateProduct form)?

[nodkz]

@cellis Relay Store just create new record with Product. Connection will be keep untouched, cause we should somehow to pass additional config via RANGE_ADD to our mutation for informing relay that it also should mutate connection. But it requires to return connection in mutation payload.

So in my internal app I think that it will be too complicated. And just call forceFetch on the RelayContainer which render my connections.

[nodkz]

For last you comment will answer later. For now I should run.

[nodkz]

Wow. So long ago did not look here. Merge it, before I'll start to migrating on Relay.Modern