NerdGraphMutation

A generic NerdGraph mutation component that allows you to mutate anything from NerdGraph.

Usage

import { NerdGraphMutation } from 'nr1'

Examples

Do a mutation

NerdGraphMutation.mutate({
mutation: ngql`
mutation($guid: EntityGuid!) {
taggingAddTagsToEntity(
guid: $guid
tags: { key: "team", values: ["ui"] }
) {
errors {
message
}
}
}
`,
variables: {
guid: 'XXXXXXXXXXX',
},
});

Do mutation and refetch query

function render() {
const mutation = ngql`
mutation($guid: EntityGuid!) {
taggingAddTagsToEntity(guid: $guid, tags: $tags) {
errors {
message
}
}
}
`;
const variables = {
guid: 'XXXXXXXXXXX',
tags: { key: 'team', values: ['ui'] },
};
// NOTE: Sometimes mutations take awhile so doing a refetch immediatly after a mutate
// doesn't show any change.
return (
<NerdGraphQuery query={query} variables={variables}>
{({ data, refetch }) => (
<>
<RenderData data={data} />
<Button
onClick={() =>
NerdGraphMutation.mutate({
mutation,
variables,
}).then(refetch)
}
>
Mutate
</Button>
</>
)}
</NerdGraphQuery>
);
}

Props

children

REQUIRED
function

Render prop function as children.

function (
mutate: function,

Function to trigger a mutation from your UI.

mutationResult: MutationResult

Results of the mutation.

) => React.ReactNode

mutation

REQUIRED
string|object

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

import { ngql } from 'nr1';
const mutation = ngql`
mutation($guid: EntityGuid!) {
taggingAddTagsToEntity(guid: $guid, tags: $tags) {
errors {
message
}
}
}
`;

unsafeExperimentalNamespaces

string[]

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

variables

object

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.

}