how to use enum in apollo-client?

Question

the enum define in OrderTypesEnum.gql

enum OrderTypes {
  full_buy
  pink_buy
}

import OrderTypesEnum.gql file

import OrderTypes from '@/graphql/OrderTypesEnum.gql'`

but, How to get enum in code ?

I use OrderTypes.full_buy get some error:

   self.$apollo.mutate({
        mutation: createOrder,
        variables: {
          subjectId: self.subject.id,
          types: OrderTypes.full_buy
        }
      })

Mutation createOrderMutation error: Invariant Violation: Schema type definitions not allowed in queries. Found: "EnumTypeDefinition"

the inspect of OrderTypes type enum

Answer 1

Prerequisites:

< SomeEnumType > is defined in GraphQL schema (server side, no client configuration needed)

Let's assume we have:

enum SomeEnumType {
    OPTION1,
    OPTION2,
    OPTION3
}

Apollo Client should be configured appropriate way and connected with the GraphQL API.

Then on the client side:

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

Only by doing this, we can pass an enum as a variable in our query or mutation. For example, with useMutation hook we can now mutate as follows:

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

Since the type definition in gql tag equals the definition in Schema, GraphQL recognizes a variable as an enum type despite giving it as a string.

If we want to pass an enum to 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]
        },

UPDATE: String enums and type generation

Personally, I recommend using string enums if possible. The usage of string enums is more straightforward.

enum SomeEnumType {
    OPTION1 = "OPTION1",
    OPTION2 = "OPTION2",
    OPTION3 = "OPTION3"
}

...
...

variables: {
    foo: SomeEnumType.OPTION1
}

For next-level coding, enum types, and all other type definitions can be automatically generated to the frontend with graphql-codegen. I really recommend using this approach, since backend schema updates and additions directly can be directly reflected in your frontend code revealing bugs and helping you code faster and more reliable.

Answer 2

As the error message is suggesting, Schema type definitions not allowed in queries., you can't add an enum definition in an operation document (ExecutableDefinition). You can only have operations (query, mutation, or subscription), or fragments definitions. That is, this is invalid:

enum OrderTypes {
  FULL_BUY
  PINK_BUY
}

mutation createOrderMutation {
  ...
}

If you want to define a local enum on your client, you can use the typeDefs property during ApolloClient initialization:

const client = new ApolloClient({
  cache,
  typeDefs: gql`
    enum OrderTypes {
      FULL_BUY,
      PINK_BUY
    }
  `,
});

And then you'll be able to see the OrderTypes enum on client-side introspection (i.e Apollo extension).

Pay attention to the client-side highlight: if you try to send a request with this enum for a non-client field (i.e without the @client directive) and it makes through your server, you'll get a schema error saying that the enum type does not exist, unless you define it on your backend.