How to pass Object to mutation of apollo graphql

user_11025362 0
Viewed 4537

I try to pass variables to my mutation in react project. It is working static code:

const EDIT_WORD = gql`
  mutation {
    editWord(
      eng_word: "apple"
      data: { eng_word: "apple1", ru_word: "яблоко1" }
    ) {
      eng_word
    }
  }
...
const [editWordHook] = useMutation(EDIT_WORD);
...
editWordHook();

It is code with some mistake:

const EDIT_WORD = gql`
  mutation($eng_word: String!, $data: wordInput!) {
    editWord(
      eng_word: $eng_word
      data: { eng_word: $eng_word, ru_word: $ru_word }
    ) {
      eng_word
    }
  }
  `;
...
const [editWordHook] = useMutation(EDIT_WORD);
...
editWordHook({
        variables: {
          eng_word: editedWord,
          data: {
            eng_word: englishWordText,
            ru_word: russianWordText,
          },
        },
      });

Instead of [$data: wordInput!] I tried 

$data: { $eng_word: String!, $ru_word: String! }

But is didn't help... Error log didn't provide anything valuable:

// value or the constructed error will be meaningless.
> 46 | constructor({
     | ^  47 |   graphQLErrors,
  48 |   networkError,
  49 |   errorMessage,

Already spent 10 hours and can't find mistake...

apollo-client graphql reactjs
4 Answers

You pass variables 

      { eng_word: editedWord,
              data: {
                eng_word: englishWordText,
                ru_word: russianWordText,
              }
       }

to your editWordHook function, but your EDIT_WORD mutation does not expect it.

const EDIT_WORD = gql`
  mutation($eng_word: String!, $data: wordInput!) {
    editWord(
      eng_word: $eng_word
      data: { eng_word: $eng_word, ru_word: $ru_word }
    ) {
      eng_word
    }
  }
  `;

Your EDIT_WORD mutation does not have required params

const EDIT_WORD = gql`
  mutation($eng_word: String!, $data: wordInput!) {
    editWord(
      eng_word: $eng_word
      data: { eng_word: $eng_word, ru_word: $ru_word }
    ) {
      eng_word
    }
  }
  `;

As you can see mutations input params are $eng_word: String! and $data: wordInput! but you use $ru_word there.

If you data variable is corresponds to wordInput! type, try to use whole data object to the mutation

const EDIT_WORD = gql`
  mutation($eng_word: String!, $data: wordInput!) {
    editWord(
      eng_word: $eng_word
      data: $data
    ) {
      eng_word
    }
  }
  `;
user_134252820

Thank you everybody who tried to help me! I gave up and changed my schema to uglier version...

editWord(
    edited_eng_word: String!
    new_eng_word: String!
    new_ru_word: String!
  ): Word!

Now it does't require object and works. ...I hate graphQl

user_110253620

I have same problem as you. I found the solution in my side.

const EDIT_WORD = gql`
  mutation($eng_word: String!, $data: wordInput!) {
    editWord(
      eng_word: $eng_word,
      data: $data
    ) {
      eng_word
    }
  }
`;

You may have to do like this. and when call this mutation, do like this:

editWord({
    variables: {
        eng_word: 'XXX'
        data: {
            eng_word: "YYY",
            ru_word: "ZZZ",
        }
    }
}).then(
).catch(
)

hope this will help you

Admin1

Here is an example of a mutation request when you want to pass an object as a varible

const CREATE_GAME = gql`
      mutation createGame($game: CreateGameInput!) {
        createGame(input: $game) {
          name
        }
      }
    `;


const [createGameDB] = useMutation(CREATE_GAME);
await createGameDB({ variables: {game: preparedGameToDb}})

CreateGameInput it's the input that you defined on your server. In my case it looks like that

@InputType()
export class CreateGameInput {    
        @Field(() => String)
        name: String;
        @Field(type => [TeamInput], { nullable: true })
        teams: TeamInput[];
        @Field(type => [MemberInput], { nullable: true })
        members: MemberInput[]
        @Field(type => [GameWordInput], { nullable: true })
        words: GameWordInput[];
}
user_155984190
Related