Constructing Types with the GraphQL Package

We can create a simple GraphQL server with Express. To do this, we need the express-graphql and graphql packages.

In this article, we’ll look at how to add types that we can use to build a schema with the graphql package.

Constructing Types

We can construct a schema programmatically with the GraphQLSchema constructor that comes with the graphql package.

Instead of defining Query and Mutation types using the schema language, we can create them as separate object types.

For example, we can write the following to create a type with the graphql.GraphQLObjectType constructor to create an object type programmatically:

const express = require('express');
const graphqlHTTP = require('express-graphql');
const graphql = require('graphql');
const userType = new graphql.GraphQLObjectType({
  name: 'User',
  fields: {
    id: { type: graphql.GraphQLString },
    name: { type: graphql.GraphQLString },
  }
});

let users = {
  '1': {
    id: '1',
    name: 'Jane'
  }
}

const queryType = new graphql.GraphQLObjectType({
  name: 'Query',
  fields: {
    user: {
      type: userType,
      args: {
        id: { type: graphql.GraphQLString }
      },
      resolve: (_, { id }) => {
        return users[id];
      }
    }
  }
});

const schema = new graphql.GraphQLSchema({ query: queryType });

const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(3000, () => console.log('server started'));

In the code above, we created the userType GraphQL data type by writing:

const userType = new graphql.GraphQLObjectType({
  name: 'User',
  fields: {
    id: { type: graphql.GraphQLString },
    name: { type: graphql.GraphQLString },
  }
});

The name field defines the name of our type and the fields object has the fields that we include with the type. We defined id and name both to have type String .

Then we define our Query type with:

const queryType = new graphql.GraphQLObjectType({
  name: 'Query',
  fields: {
    user: {
      type: userType,
      args: {
        id: { type: graphql.GraphQLString }
      },
      resolve: (_, { id }) => {
        return users[id];
      }
    }
  }
});

In the code above, we defined the name of the type to be Query . The fields we include is the user field, which is of type User that we defined above.

Also, we specified that we have the String id as the argument with the args property.

Finally, we have a resolve property with the resolver to return what we want to return.

In this case, we want to return the User from the users object given the id passed into the argument.

Then when we make the following query:

{
  user(id: "1"){
    id
    name
  }
}

We get back:

{
  "data": {
    "user": {
      "id": "1",
      "name": "Jane"
    }
  }
}

since we have the following in the users object:

let users = {
  '1': {
    id: '1',
    name: 'Jane'
  }
}

We can do the same with mutations.

This is particularly useful is we want to create a GraphQL schema automatically from something else like a database schema. We may have a common format for something like creating and updating database records.

It’s also useful for implementing features like union types that don’t map to ES6 constructs.

GraphQLUnionType

We can create union types with the GraphQLUnionType constructor.

To create a union type and use it in our app, we can use the GraphQLUnionType constructor as follows:

const express = require('express');
const graphqlHTTP = require('express-graphql');
const graphql = require('graphql');
class Dog {
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
};

class Cat {
  constructor(id, name, age) {
    this.id = id;
    this.name = name;
    this.age = age;
  }
};

const DogType = new graphql.GraphQLObjectType({
  name: 'Dog',
  fields: {
    id: { type: graphql.GraphQLString },
    name: { type: graphql.GraphQLString },
  }
});

const CatType = new graphql.GraphQLObjectType({
  name: 'Cat',
  fields: {
    id: { type: graphql.GraphQLString },
    name: { type: graphql.GraphQLString },
    age: { type: graphql.GraphQLInt },
  }
});

const PetType = new graphql.GraphQLUnionType({
  name: 'Pet',
  types: [DogType, CatType],
  resolveType(value) {
    if (value instanceof Dog) {
      return DogType;
    }
    if (value instanceof Cat) {
      return CatType;
    }
  }
});

let pets = {
  '1': new Dog('1', 'Jane'),
  '2': new Cat('1', 'Jane', 11),
}

const queryType = new graphql.GraphQLObjectType({
  name: 'Query',
  fields: {
    pet: {
      type: PetType,
      args: {
        id: { type: graphql.GraphQLString }
      },
      resolve: (_, { id }) => {
        return pets[id];
      }
    }
  }
});

const schema = new graphql.GraphQLSchema({ query: queryType });

const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(3000, () => console.log('server started'));

In the code above, we created the Dog and Cat classes to serve as models for our data.

Then we create the GraphQL Dog and Cat types as follows:

const DogType = new graphql.GraphQLObjectType({
  name: 'Dog',
  fields: {
    id: { type: graphql.GraphQLString },
    name: { type: graphql.GraphQLString },
  }
});
const CatType = new graphql.GraphQLObjectType({
  name: 'Cat',
  fields: {
    id: { type: graphql.GraphQLString },
    name: { type: graphql.GraphQLString },
    age: { type: graphql.GraphQLInt },
  }
});

We defined the DogType and CatType constants to define the Dog and Cat object types.

Dog has id and name fields and Cat has id , name , and age fields.

Then we defined the Pet union type, which is a union of Dog and Cat as follows:

const PetType = new graphql.GraphQLUnionType({
  name: 'Pet',
  types: [DogType, CatType],
  resolveType(value) {
    if (value instanceof Dog) {
      return DogType;
    }
    if (value instanceof Cat) {
      return CatType;
    }
  }
});

Note that we have an array of types and a resolveType method instead of the resolve method.

Then finally, we create our query type so that we can return a response to the user as follows:

const queryType = new graphql.GraphQLObjectType({
  name: 'Query',
  fields: {
    pet: {
      type: PetType,
      args: {
        id: { type: graphql.GraphQLString }
      },
      resolve: (_, { id }) => {
        return pets[id];
      }
    }
  }
});

The resolve function gets the pets entry by id and returns it, and we specified that the type we return is the PetType .

Once we did that, we can make our query using inline fragments as follows:

{
  pet(id: "1"){
    __typename,
    ...on Dog {
      id
      name
    }
    ...on Cat {
      id
      name
      age
    }
  }
}

In the query above, we discriminated between the fields of Dog and Cat by using the ...on operator. __typename gets the type of the object returned.

With that query, we should get:

{
  "data": {
    "pet": {
      "__typename": "Dog",
      "id": "1",
      "name": "Jane"
    }
  }
}

since we have a Dog instance with key '1' in pets .

On the other hand, if we make a query for Pet with ID 2 as follows:

{
  pet(id: "2"){
    __typename,
    ...on Dog {
      id
      name
    }
    ...on Cat {
      id
      name
      age
    }
  }
}

We get:

{
  "data": {
    "pet": {
      "__typename": "Cat",
      "id": "1",
      "name": "Jane",
      "age": 11
    }
  }
}

since we have a Cat instance as the object with key '2' in pets .

Conclusion

We can create types with GraphQLObjectType constructor to create object types.

To create union types, we can use the GraphQLUnionType , then we have to resolve the type in the resolveType method by checking the type of the object and returning the right one.

We can query union types with inline fragments and check the type with __typename .

The post Constructing Types with the GraphQL Package appeared first on The Web Dev.