# Redux Tutorial: Setup GraphQL Schema

Modify data/schema.js

Open data/schema.js in your favorite editor and replace the contents of the file with the following code:


import {
  GraphQLObjectType,
  GraphQLNonNull,
  GraphQLBoolean,
  GraphQLSchema,
  GraphQLString,
  GraphQLList,
  GraphQLInt,
  GraphQLID
} from 'graphql';

import {
  getTodo,
  getTodos,
  createTodo,
  updateTodo,
  removeTodo,
} from './database';

const todoType = new GraphQLObjectType({
  name: 'Todo',
  fields: () => ({
    _id: {
      type: GraphQLString,
      resolve: ({ _id }) => _id,
    },
    todo: {
      type: GraphQLString,
      resolve: ({ todo }) => todo,
    },
    completed: {
      type: GraphQLBoolean,
      resolve: ({ completed }) => completed
    }
  })
});

const queryType = new GraphQLObjectType({
  name: 'Query',
  fields: () => ({
    todo: {
      type: todoType,
      args: {
        _id: { type: new GraphQLNonNull(GraphQLString) },
      },
      resolve: (_, { _id }) => getTodo(_id),
    },
    todos: {
      type: new GraphQLList(todoType),
      resolve: () => getTodos(),
    },
  })
});

const mutationType = new GraphQLObjectType({
  name: 'Mutation',
  fields: () => ({
    createTodo: {
      type: todoType,
      args: {
        todo: { type: new GraphQLNonNull(GraphQLString) },
      },
      resolve: (_, { todo }) => createTodo(todo),
    },
    updateTodo: {
      type: todoType,
      args: {
        _id: { type: new GraphQLNonNull(GraphQLString) },
        todo: { type: GraphQLString },
        completed: { type: GraphQLBoolean },
      },
      resolve: (_, { _id, todo, completed }) =>
                  updateTodo(_id, todo, completed),
    },
    removeTodo: {
      type: todoType,
      args: {
        _id: { type: new GraphQLNonNull(GraphQLString) },
      },
      resolve: (_, { _id }) => removeTodo(_id),
    }
  })
});

export default new GraphQLSchema({
  query: queryType,
  mutation: mutationType,
});

Let's breakdown the above code:

  • We import all the necessary GraphQL types that will be used for defining our schema.
  • We then import the database functions that we defined in the previous section.
  • We define a Todo GraphQL type that accepts 3 fields: _id of type GraphQLString, todo of type GraphQLString and completed of type GraphQLBoolean. Each of these return types know how to resolve from data it receives. This is what our Todo type looks like:
    type Todo {
      _id: String
      todo: String
      completed: Boolean
    }
  • Then, we define a Query type. The Query type has two fields todo and todos which are used for fetching a single todo item and multiple todo items respectively. The data is fetched using database functions getTodo(id) and getTodos() we defined earlier in our redux-todolist/data/database.js file.
  • After we have defined our Query type, we define a Mutation type to handle mutations to our Todo items. The mutation type takes 3 fields: createTodo(todo), updateTodo(_id, todo, completed) and removeTodo(_id). We use the database functions defined earlier to mutate the Todo item based on the data receieved.
  • We finally define a GraphQLSchema made up of the query and mutation we defined earlier and export it.

You can test the GraphQL schema we defined by launching the GraphiQL interface that ships with the integration. Just navigate to http://localhost:8080/graphql and play with the newly defined schema.


With this our backend implementation is complete. Now, we can move on to creating our Redux action types.