CodeCraft Kit

Chakra-UI ReactJs Next.JS

@codecraftkit

Documentation

useGqlMutation

Description#

The useGqlMutation allows you to make graphql mutations

This hook is based on useMutation

Installation#

Code Example

npm i @codecraftkit/use-gql-mutation

Import#

it can be imported from hooks.

Code Example

import { useGqlMutation } from "@codecraftkit/hooks";

or alone.

Code Example

import { useGqlMutation  } from "@codecraftkit/use-gql-mutation";

Usage#

This hook allows you to make requests using graphql

In order to use this hook do you need to configure a query like this

Code Example

import { gql } from '@apollo/client'

export const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`

Using the hooks

Code Example

const {data, call, loading, error} = useGqlMutation('AddTodo',ADD_TODO)

Another Example#

Code Example

function MyApp() {
const { data: todos, call: addTodo, loading } = useGqlMutation('AddTodo',ADD_TODO)

const onClick = async () => {
  try {
    const res = await addTodo({ name: 'Todo 1', description: 'Description' })
    if (res) {
      console.log('good')
    } else {
      console.log('bad')
    }
  } catch (e) {
    console.log('bad')
  }
}

return <>
  {
    todos.map(todo =>
      <Text>
        todo?.name
      </Text>
    )
  }
  <Button
    size="xs"
    onClick={onClick}
    isLoading={loading}
    isDisabled={loading}
  >
    Add New Todo
  </Button>
</>
}

The loading item is an internal loading managed in the hook, it is NOT the loading from useMutation

Arguments#

name

type

required

default

description

collection

String

yes

The name of the query's collection

MUTATION

MUTATION

yes

The mutation to execute when making the call, it must be a valid graphql mutation

options

Object

{}

configuration accepted for the useQuery hook

defaultValue

String

[]

data default value

verbose

String

false

Show requests logs in the console

Results#

name

type

description

data

any

Query's response inside the collection field

call

function

Function to execute the mutation supplied, it receive the mutation params as parameters

boolean

Request loading state

error

String

Response Error