NerdGraphMutation

Usage

import { NerdGraphMutation } from 'nr1'

Examples

Do a mutation

1
NerdGraphMutation.mutate({
2
  mutation: ngql`
3
    mutation($guid: EntityGuid!) {
4
      taggingAddTagsToEntity(
5
        guid: $guid
6
        tags: { key: "team", values: ["ui"] }
7
      ) {
8
        errors {
9
          message
10
        }
11
      }
12
    }
13
  `,
14
  variables: {
15
    guid: 'XXXXXXXXXXX',
16
  },
17
});

Do mutation and refetch query

1
function render() {
2
  const mutation = ngql`
3
    mutation($guid: EntityGuid!) {
4
      taggingAddTagsToEntity(guid: $guid, tags: $tags) {
5
        errors {
6
          message
7
        }
8
      }
9
    }
10
  `;
11
  const variables = {
12
    guid: 'XXXXXXXXXXX',
13
    tags: { key: 'team', values: ['ui'] },
14
  };
15

16
  // NOTE: Sometimes mutations take awhile so doing a refetch immediatly after a mutate
17
  // doesn't show any change.
18
  return (
19
    <NerdGraphQuery query={query} variables={variables}>
20
      {({ data, refetch }) => (
21
        <>
22
          <RenderData data={data} />
23
          <Button
24
            onClick={() =>
25
              NerdGraphMutation.mutate({
26
                mutation,
27
                variables,
28
              }).then(refetch)
29
            }
30
          >
31
            Mutate
32
          </Button>
33
        </>
34
      )}
35
    </NerdGraphQuery>
36
  );
37
}

Props

childrenrequiredfunction

Render prop function as children.

function (mutate: function, Function to trigger a mutation from your UI.
mutationResult: MutationResult Results of the
mutation.
) => React.ReactNode

mutationrequiredstring|object

GraphQL mutation, either as a string or a GraphQL document parsed into an AST by graphql-tag.

Example 1

1
import { ngql } from 'nr1';
2

3
const mutation = ngql`
4
  mutation($guid: EntityGuid!) {
5
    taggingAddTagsToEntity(guid: $guid, tags: $tags) {
6
      errors {
7
        message
8
      }
9
    }
10
  }
11
`;

unsafeExperimentalNamespacesstring[]

DEFAULT

[]

List containing unsafe experimental namespaces your query opts in to using.

variablesobject

DEFAULT

{}

Object containing all of the variables your mutation needs to execute.

Methods

`NerdGraphMutation.mutate`

function (props: Object Object containing the mutation options. Any
NerdGraphMutation prop is a valid option except children.
) => PromiseQueryResult

Type definitions

`PromiseQueryResult`

{error: ApolloClient.ApolloError, Runtime error with graphQLErrors
and networkError properties.
data: Object, Object containing the result of your query.
fetchMore: function|null, If not null, fetchMore allows you to
load more results for your query. New data is merged with previous
data.
refetch: function, Refetch the query.
}

`MutationResult`

{loading: boolean, Indicates that the request is in flight.
error: ApolloClient.ApolloError, Runtime error with graphQLErrors
and networkError properties.
data: Object, Object containing the result of your mutation.
}