diff --git a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/07_ReactJS_Redux_and_GraphQL.md b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/07_ReactJS_Redux_and_GraphQL.md index d83d3da0d22..2c34a482e0a 100644 --- a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/07_ReactJS_Redux_and_GraphQL.md +++ b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/07_ReactJS_Redux_and_GraphQL.md @@ -1086,7 +1086,61 @@ const transformReadNotes = (manager) => { export default transformReadNotes; ``` -Simple! The transformation passes us a `ApolloGraphQLManager` instance that provides a fluent API for updating a query definition the same way the `FormStateManager` allows us to update Redux form state. In this case, our need is really straightforward. We'l just add a new field and be done with it. +Simple! The transformation passes us a `ApolloGraphQLManager` instance that provides a fluent API for updating a query definition the same way the `FormStateManager` allows us to update Redux form state. + +#### Adding fields + +In the above example, we added a single field to a query. Here's how that works: + + +```js +manager.addField(fieldName, fieldPath = 'root') +``` + +The `fieldPath` argument tells the manager at what level to add the field. In this case, since the `Priority` field is going on the root query (`readNotes`), we'll use `root` as the path. But suppose we had a more complex query like this: + +``` +query readMembers { + FirstName + Surname + Friends { + Email + Company { + Name + } + } +} +``` + +If we wanted to add a field to the nested `Company` query on `Friends`, we would use a path syntax. + +```js +manager.addField('Tagline', 'root/Friends/Company'); +``` + +#### Adding field arguments + +Let's suppose we had the following query: + +``` +query ReadMembers($ImageSize: String!) { + readMembers { + FirstName + Avatar(Size: $ImageSize) + Company { + Name + } + } +} +``` + +Maybe the `Company` type has a `Logo`, and we want to apply the `ImageSize` parameter as an argument to that field. + +```js +manager.addArg('Size', 'ImageSize', 'root/Company/Logo'); +``` + +Where `root/Company/Logo` is the path to the field, `Size` is the name of the argument on that field, and `ImageSize` is the name of the variable. #### Applying the transforms