apolloClient.mutate variables not working

[jarnojellesma]

Intended outcome:
Variable merged into the mutation

Actual outcome:
Status: 400 error with variable, and the mutation works when hard-coding the value in the mutation:

 sendMsgNotWork() {
      apolloClient.mutate({
        variables: { text: "hello" },
        mutation: gql`
          mutation {
            addComment(text: $text) {
              id
              text
            }
          }
        `,
        
      })
      .then(result => { console.log(result) })
      .catch(error => { console.log(error) });
    },

    sendMsgWorks() {
      apolloClient.mutate({
        variables: { text: "hello" },
        mutation: gql`
          mutation {
            addComment(text: "Hello") {
              id
              text
            }
          }
        `,
        
      })
      .then(result => { console.log(result) })
      .catch(error => { console.log(error) });
    }

How to reproduce the issue:
https://github.com/jarnojellesma/graphql-experiment

Version

• apollo-client@2.0.4

[jdmunro]

I tried your example project, this seems to work fine:

apolloClient.mutate({
  variables: { text: "hello" },
  mutation: gql`
    mutation AddComment($text: String!){
      addComment(text: $text) {
        id
        text
      }
    }
  `,
  
})
.then(result => { console.log(result) })
.catch(error => { console.log(error) });

[NicholasGWK]

@jarnojellesma Any insight on the cause of this? Seems to be happening to me right now :(

[hwillson]

As mentioned in #2762 (comment), the reproduction seems to work properly when tested. If this continues to be a problem, please post back with an updated reproduction that shows the issue happening. Thanks!

[masiamj]

@jarnojellesma I'm running into the same issue. Did you ever resolve this?

[zaid-zaheer-shaikh]

I tried your example project, this seems to work fine:

apolloClient.mutate({
  variables: { text: "hello" },
  mutation: gql`
    mutation AddComment($text: String!){
      addComment(text: $text) {
        id
        text
      }
    }
  `,
  
})
.then(result => { console.log(result) })
.catch(error => { console.log(error) });

If i wanted to add a custom type in variables, like instead of string, i wanted to add a custom object type, how will i add. $text:String, instead, i want to put something like $text:Message, how do i define that on the client

[shkrt]

This is because variables need to be handled on the server side. Nothing to do with client, same as apollographql/react-apollo#164 @masiamj @marcotc

[osamaabid03]

Thankx @vigoss6666

[nicreichert]

I'm having this issue both on mutate and query.

the code I use is:

loadUsers = (variables?: GetUsersVariables['input']) =>
   client
      .query<GetUsers>({
        variables,
        query: getUsersQuery,
        fetchPolicy: 'network-only',
      })
      .then(response => this.setState({ loading: false, users: response.data.users }))
      .catch(err => console.error(err))

and

  createUser = (variables: CreateUserVariables['input']) =>
    client
      .mutate<CreateUser>({
        variables,
        mutation: createUserMutation,
      })
      .then(response => this.setState({ userLogin: response.data.createUser }))

I log the variables parameter and the method is properly receiving the variables, however, all the requests I make have empty object on variables, like so:

Could it be my client setup?

Here's how I'm setting it up:

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'

const link = new HttpLink({ uri: 'http://localhost:4000/graphql' })

export const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  defaultOptions: {
    query: {
      fetchPolicy: 'network-only',
      notifyOnNetworkStatusChange: true,
    },
  },
})

[victors1681]

late response, but that happens when the variables in the client variables: { .... } do not match with the variables with the query/mutation ... also are case sensitive.

I'm having this issue both on mutate and query.

the code I use is:

loadUsers = (variables?: GetUsersVariables['input']) =>
   client
      .query<GetUsers>({
        variables,
        query: getUsersQuery,
        fetchPolicy: 'network-only',
      })
      .then(response => this.setState({ loading: false, users: response.data.users }))
      .catch(err => console.error(err))

and

  createUser = (variables: CreateUserVariables['input']) =>
    client
      .mutate<CreateUser>({
        variables,
        mutation: createUserMutation,
      })
      .then(response => this.setState({ userLogin: response.data.createUser }))

I log the variables parameter and the method is properly receiving the variables, however, all the requests I make have empty object on variables, like so:

Could it be my client setup?

Here's how I'm setting it up:

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'

const link = new HttpLink({ uri: 'http://localhost:4000/graphql' })

export const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  defaultOptions: {
    query: {
      fetchPolicy: 'network-only',
      notifyOnNetworkStatusChange: true,
    },
  },
})

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.