Apollo-client: Add support for inline enum arguments

[NeoPhi]

Given that GraphQL serializes Enum values as strings, it would be great to have them supported as argument parameters. Currently they throw a Only scalar argument types currently supported. error.

[stubailo]

@NeoPhi can you show me how you're passing them? Is this through a variable, or inline in the query? Should be a trivial fix.

[NeoPhi]

I have uses for both inline and via variables. This is a typical example:

function mapQueriesToProps({ ownProps }) {
  return {
    data: {
      query: gql`
        query live($sortOrder: SortOrder!) {
          viewer {
            available(first: 10, order: $sortOrder) {
              id
              displayName
            }
          }
        }
      `,
      variables: {
        sortOrder: ownProps.sortOrder,
      }
    },
  };
}

[stubailo]

OK - I'll add some tests for that, should be pretty simple to do!

[stubailo]

@NeoPhi so in the Apollo Demo example, we do use Enum arguments via variables and it seems to work: https://github.com/apollostack/apollo-demo/blob/5d045ff807a08a754628ad9edf8e17526d6ceac0/imports/ui/Feed.js#L59

Is your code different from that somehow?

[NeoPhi]

@stubailo My apologies, I think I copied the example from the wrong component. I do see that Enum arguments via variables are working. It seems only hard coded Enum arguments are having problems. Revised example:

function mapQueriesToProps({ ownProps }) {
  return {
    data: {
      query: gql`
        query live {
          viewer {
            available(first: 10, order: NUMERIC) {
              id
              displayName
            }
          }
        }
      `
    },
  };
}

[stubailo]

Ah, yes. Thanks for updating the code snippet!

[stubailo]

Question: is using variables a fine workaround, or is being able to type it in the query string itself critical? Curious how important this issue is for you.

[NeoPhi]

Using variables will be the primary use case, the hard coded version was an initial test to get things wired up quickly.

[stubailo]

Relabeled this to a "feature" since there's a great workaround of using variables, and we'll suggest that people do that with the new error message in #211.

For context, the reason this is non-trivial is that GraphQL enums also have a value property that's different from their name. So in the case of:

feed(type: UNREAD)

We know that the name of the enum member is UNREAD, but we don't actually know what value the GraphQL server would expect. This means that if the same argument is passed first via inline arg, then via variable, we wouldn't be able to associate them on the client.

[nevir]

I'm wondering if it would make sense for the client to consume the complete schema.

It would alleviate cases like this (apollo-client could just look up the value of the enum). It would also remove the need for the addTypename query transformer (look up the type of a node) - probably other cases too

[sorenbs]

Just wanted to add that this issue adds a lot of friction when introducing new people to GraphQL and Apollo. We just spent two days helping people out at a hackathon and this was the one issue blocking most groups.

[stubailo]

@sorenbs sorry about this! It's actually really easy to fix but we didn't realize it was a big deal since you can just use variables.

Going to fix it right now.

[PavanBahuguni]

What if the Enum is inside a type? For example like below

mutation addSample($action: sampleInputType){ addSample(action: $action) { id } }
sampleInputType has a enum field.

The above query do not work? How to handle nested enums with variables?

[LinnaViljami]

Prerequisites:

We must define < SomeEnumType > in our GraphQL schema (server side, no client configuration needed)

Let's assume we have defined:

enum SomeEnumType {
    OPTION1,
    OPTION2,
    OPTION3
}

We also must configure our Apollo Client in appropriate way ans connect it with the GraphQL API.

Then on client side:

export const OUR_MUTATION = gql`
    mutation ourMutation($foo: SomeEnumType){
        ourMutation(foo: $foo){
            bar
        }
    }    
`

Only doing this, you can pass enum as a variable in your query or mutation. For example using useMutation hook we can now mutate as follows:

const [ourMutation] = useMutation(OUR_MUTATION, {
        variables: {
            foo: "OPTION2"
        },

Since our type definition in gql tag equals with definition in Schema, GraphQL recognizes our variable as an enum type despite of that we give it as a string.

If we want pass enum to our variables using typescript enums we can do it as follows:

enum SomeEnumType {
    OPTION1 = 0,
    OPTION2 = 1,
    OPTION3 = 2
}

const [ourMutation] = useMutation(OUR_MUTATION, {
        variables: {
            foo: SomeEnumType[SomeEnumType.OPTION1]
        },