graphql-editor / graphql-zeus

GraphQL client and GraphQL code generator with GraphQL autocomplete library generation ⚡⚡⚡ for browser,nodejs and react native ( apollo compatible )
https://graphqleditor.com/docs/tools/zeus/index/
MIT License
1.94k stars 105 forks source link

add useMutation variables for react-query #357

Closed zelief closed 1 day ago

zelief commented 1 year ago

Solves #252, #317 Improve #253 Previously, the variables are not used in the Chain Function, so the generated query result will not include variables. This PR fixes that.

Usage with useTypedMutation

With built-in variable types:

const mutation = useTypedMutation('addCard', {
  addCard: [
    { card: { Attack: $('attack', 'Int!'), Defense: 5, description: 'new card', name: $('name', 'String!') } },
    { Attack: true, Defense: true, id: true },
  ],
});

mutation.mutate({ variables: { attack: 10, name: 'Charmander' } });

With ZEUS_VARIABLES Type:

import { $ } from 'zeus';
import { useTypedMutation } from './reactQuery';

const mutation = useTypedMutation('addCard', {
  addCard: [{ card: $('card', 'createCard') }, { Attack: true, Defense: true, id: true }],
});

mutation.mutate({ variables: { card: { Attack: 10, Defense: 5, description: 'new card', name: 'Bulbasaur' } } });

And it will force you to be type-safe when calling mutate() function.