Constructing Types with the GraphQL Package
Tags: graphql, javascript, webdev
Published: 2020-07-24 01:12:42

---
title: Constructing Types with the GraphQL Package
published: true
date: 2020-07-19 01:31:32 UTC
tags: GraphQL,javascript,webdev
canonical_url: https://thewebdev.info/2020/07/19/constructing-types-with-the-graphql-package/?utm_source=rss&utm_medium=rss&utm_campaign=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](https://thewebdev.info/2020/07/19/constructing-types-with-the-graphql-package/) appeared first on [The Web Dev](https://thewebdev.info).