Input variable injection in GraphQL mutations

Does Fauna support input variable injection in GraphQL mutations? All of the examples I see in the docs use inline data for mutations, like this:

(from: GraphQL relationships | Fauna Documentation)

mutation {
  createUser(data: {
    name: "Jane"
    cars: {
      create: [
        { plate: "AAA-1234" }
        { plate: "BBB-123" }
      ]
    }
  }) {
    _id
    name
    cars {
      data {
        plate
      }
    }
  }
}

However, I’d like to set up the mutation like this, with the data set to a variable that will be injected later by the query library:

mutation CreateUser($data: CreateUserInput!) {
  createUser(data: $data) {
    _id
    name
    cars {
      data {
        plate
      }
    }
  }
}

The difference being that the data variable can be passed in after the mutation is declared. This is common practice when using Apollo Client’s useMutation hook. Typically, you would declare a mutation outside of a React component, like this:

import React from 'react';
import { gql, useMutation } from '@apollo/client';

const CREATE_USER = gql`
    mutation CreateUser($data: CreateUserInput!) {
        createUser(data: $data) {
            _id
            name
            cars {
                data {
                    plate
                }
            }
        }
    }
`;

const UserProfile = () => {
    const [createUser, { data, loading, error }] = useMutation(CREATE_USER);
    
    // After a form submission, you would do this:
    createUser({
        variables: {
            data: {     // this data would come from user input, so it can't be added to the
                        // CREATE_USER mutation ahead of time
                name: "Jane"
                cars: {
                create: [
                    { plate: "AAA-1234" }
                    { plate: "BBB-123" }
                ]
                }
            }
        }
    })
    
    // Rest of component code goes here ...
}

I tested this within the Fauna GraphQL playground by setting up a new database and populating it with the default test data. I can see that two equivalent mutations with an inline variable vs. an injected variable will work differently. The mutation using an inline variable succeeds; the one with an injected variable fails.

Is this expected? Am I doing something wrong?

I’m not sure what is going wrong, @alexnitta, but you are supposed to be able to use the query variables for mutations. That is not a Fauna thing, that’s just a general GraphQL thing.

I am guessing it’s just easier for the examples to show the variable inline for most things.

AHA!! There’s an extra comma here.

image

I get the same error if I add a trailing comma to my query variables.

Make sure you query variables are specified as JSON!

damnable trailing commas from javascript mucking everything up… haha :upside_down_face:

@ptpaterson thanks for tracking that down! I got used to passing inputs into mutations within JavaScript / TypeScript, where I don’t have to care about such details.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.