-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to do mutations? #1
Comments
* feat(build): Add @nodkz's relay store gist In order to prepare for relay 2, and to make it easier to write mutations, let's use Relay.GraphQLMutation to run mutations. In theory this will allow us to not have to use Fat/Tracked queries. Addresses #1 * fix(relay2Store): Make all Relay.Environment initialization in one place. Also notice how tricky I am getting endpoint url in LoadingPage component. In clientStores.js file I keep all global variables that requires my app. It will work on client (in browser) and on server (for rendering). No need to define window.SOME_GLOBAL_VAR. I future clientStores may keep global events, redux store, browserHistrory, modalWindow caller.
Before we coming to mutations, we should complete preparation of our
Right now I implement this and provide additional instructions. |
So let practice with So lets refactor // native Relay API
toggle() {
this.setState({
isOpen: !this.state.isOpen,
});
if (!this.state.data) {
const query = Relay.createQuery(
Relay.QL`query {
viewer {
category(filter: $filter) {
${Category.getFragment('category')}
}
}
}`,
{ filter: { categoryID: this.props.id } }
);
relayStore.primeCache({ query }, readyState => {
if (readyState.done) {
const data = relayStore.readQuery(query)[0];
this.setState({ data: data.category });
}
});
}
} As you can see it is difficult for reading ( So let rewrite it with our new // our wrapper on relayStore, with simplified API
toggle() {
this.setState({ isOpen: !this.state.isOpen });
if (!this.state.data) {
relayStore
.fetch({
query: Relay.QL`query {
viewer {
category(filter: $filter) {
${Category.getFragment('category')}
}
}
}`,
variables: {
filter: { categoryID: this.props.id },
},
})
.then((res) => {
// NB: Relay does not return root field, in this case `viewer`
// so in responce we get object with fields from `viewer` (may be changed in Relay2)
this.setState({ data: res.category });
});
}
} This is much much better. @cellis please refactor all other When it will be completed let move to the server side. Clone https:/nodkz/graphql-compose-examples and try to add mutations |
…ive API with our new `relayStore.fetch` method. Related to #1
@cellis also I want you to pay attention to fragment inclusion And keep in mind that mutations are the regular queries. The difference only in naming (pointing that this request will change data on server) and in serial execution if several mutations in the request (several queries executes in parallel). Say it again, cause it is important, mutations in GraphQL almost similar to the queries. When we complete with queries, it will be very easy to understand and construct complex mutations with deep data fetching in the payload. |
@nodkz thanks for this. Will work on this refactor tomorrow after work. |
@nodkz I'm looking into refactoring the Toggles and it dawned upon me, why use the |
Called toggle() {
this.setState({ isOpen: !this.state.isOpen });
// ...
}
render() {
const { isOpen } = this.state;
return (
// ....
<Button onClick={this.toggle}>
{isOpen ? 'close' : 'open'}
</Button>
);
} We may move out fetching data to another method for clearence: toggle() {
const isOpen = !this.state.isOpen;
this.setState({ isOpen });
if (isOpen) this.fetch();
}
fetch() {
relayStore
.fetch({
query: Relay.QL`query {
viewer {
category(filter: $filter) {
${Category.getFragment('category')}
}
}
}`,
variables: {
filter: { categoryID: this.props.id },
},
})
.then((res) => {
this.setState({ data: res.category });
});
} Also this code makes one fix, it always will refresh component state from RelayStore on opening. Right now it fetches data only once, and when we introduce mutations and run them we will see stale data from component store, not from relayStore. BTW FYI you can use relayStore.fetch({ ..., force: true }) for force retrieving data from a server without clearing the cache. |
Anyway, current toggle implementation it is some kind of hack. Cause we keep data for child in the component state. Maybe in future when will be introduced react-router@v4 and this hack will be somehow removed. Cause RRv4 allows deep nested routes. But for now, for demo purposes of component approach power is the good solution. |
@nodkz RRv4 doesn't work with isomorphic rendering ( relay-tools/react-router-relay#193 ). So maybe we have to keep doing it this way :/ |
I do not use
It was discussed here relay-tools/react-router-relay#213 |
Ok, refactor if Toggle* complete. Will move to other repo later tonight to createProduct mutation. |
Some tricks with auth and context discussed here graphql-compose/graphql-compose-examples#2 |
* feat(backend): Add support for backend mutation in https:/nodkz/relay-northwind-app/pull This change simply exposes the preexisting mutation in graphql-compose-mongoose Addresses nodkz/relay-northwind-app#1. Doesn't use the heroku db as that would be insecure. @nodkz's call here. Perhaps next step is auth ;) * Add heroku security * Add heroku security file Closes #2
@cellis if you want to use |
@Stoffern I have been using it in my personal project. But right now react-router-relay is hardcoded to relay |
…2 Store Relay 2 will use GraphQLMutation, so we should start getting on this train Addresses #1
Use the new relay store to create a mutation and send it to local backend. WIP Addresses #1
I've already talked with @nodkz about this. Using this as a way to keep track. Essentially I want to know how to make a mutation that updates a hasMany, hasOne relationship.
The text was updated successfully, but these errors were encountered: