mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-06-26 06:29:24 +02:00
Add docs for new args/fields API
This commit is contained in:
parent
7ebcb7f30e
commit
1f6a84bd8b
|
@ -1080,13 +1080,67 @@ Now, let's update the query to fetch our new field.
|
|||
*my-other-app/client/transformReadNotes.js*
|
||||
```js
|
||||
const transformReadNotes = (manager) => {
|
||||
manager.addField('Priority');
|
||||
manager.addField('root', 'Priority');
|
||||
};
|
||||
|
||||
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(fieldPath, fieldName)
|
||||
```
|
||||
|
||||
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('root/Friends/Company', 'Tagline');
|
||||
```
|
||||
|
||||
#### 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('root/Company/Logo', 'Size', 'ImageSize');
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
|
@ -1260,7 +1314,7 @@ We've extended the `onAdd` callback to take two parameters -- one for the note c
|
|||
*my-other-app/client/transformCreateNote.js*
|
||||
```js
|
||||
const transformCreateNote = (manager) => {
|
||||
manager.addField('Priority');
|
||||
manager.addField('root', 'Priority');
|
||||
manager.transformApolloConfig('props', ({ mutate }) => (prevProps) => {
|
||||
const onAdd = (content, priority) => {
|
||||
mutate({
|
||||
|
|
Loading…
Reference in New Issue
Block a user