Building a simple document manager with GraphQL — Part 1

Source: FreeCodeCamp Medium

We’ve discussed one of the basic building blocks of GraphQL, it’s now time to put the knowledge together and build a simple app that helps users create and manage documents.

Previously on …

In case you missed the previous articles, you can find them here:

• GraphQL Types and Relationships
• GraphQL Queries, Mutations and Subscriptions

What we hope to achieve:

• Users should be able to register
• Users should be able to create documents using their username

For this first part, we are going to focus on setting up our server, creating the schema and resolvers and also testing our app with mock data.

We’re going to use JavaScript/Node.js for this project, and I’m assuming you already have it setup. If not please learn how to do so here.

Now let’s get to it!

Open your command line, navigate into the folder you’ll want this project to live in and run the following:

mkdir simple-dms

Next move into the just created folder and initialize a node project

cd simple-dms
npm init -y

We used the -y flag to keep things simple and just use the default options for our project.

Next we’ll be installing some dependencies that we need

npm install --save express body-parser apollo-server-express graphql-tools graphql

We are going to use express server for Node.js, apollo-server-express which is an “Express and Connect integration of GraphQL Server” and graphql-tools which allows us to use GraphQL schema language to describe our schema as a GraphQL type language string. More info on these packages as we go on.

The next task we have is to setup our schema.

In your app folder create the schema file at src/schema/index.js. We’ll define the schema of our app here as follows:

src/schema/index.js

We’re using the makeExecutableSchema from graphql-tools to generate a complete GraphQLSchema object from the string in our schema definition.

We have our basic schema; next we’ll be creating a server to serve the content of our app using express.

Create the app server file at src/index.js and put the following into it:

src/index.js

Running node ./src/index.js at this point will throw an error because we currently have no queries created.

In src/schema/index.js add the following to the type definitions after the User type:

const typeDefinitions = `
  ...
  type Query {
    
    allDocuments: [Document!]!
    allUsers: [User!]!
  
  }
`;

Here we’re defining our query to include allDocuments and allUsers which will hold the array of documents and users respectively.

Now that we have our queries defined, we need to tell the server how to handle the queries. In GraphQL it is called resolvers — functions that are mapped to individual GraphQL fields with their behavior.

So create the resolver file in src/schema/resolvers.js and add the following into it:

Now that we have our resolver, let us add it into our schema so our server can know how to handle the queries we already created.

Update src/schema/index.js to look like this:

const resolvers = require('./resolvers');
...
module.exports = makeExecutableSchema({ typeDefs, resolvers });

We are going to use GraphiQL to test our app and to set that up, we are still going to use apollo-server-express package for this. To add little context, GraphiQL is a graphical interactive in-browser GraphQL IDE.

In src/index.js add the following lines:

app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
...
app.use('/graphiql', graphiqlExpress({
  endpointURL: '/graphql'
}));
...

Let’s start our app now.

Run node ./src/index.js then after the app has started, visit http://localhost:3200/graphiql in your browser. You should see something like this:

http://localhost:3200/graphiql

This means that our app has connect to our graphql endpoint and we can now run our queries from here.

Here is an example of the result of a query:

Try running the above query in your app locally and also fell free to try out other queries and see the results.

In this article, we have been able to:

• Create a schema for Users and Documents
• Create resolvers (with mock data) for mapping functions to individual fields
• Create a server for our app
• Connect our app to GraphiQL test ground

Conclusion

In the next article, we’ll improve our app abilities so that we can:

• Create new users and documents using GraphQL mutations
• Persist data to our server using mongodb database
• Fetch our user and document data from mongodb database

Thanks for sticking around till the end. You are awesome! 👍

If this article was helpful, feel free to 👏 and share. Got any questions or suggestions? Please drop them in the comment section and I’ll make sure to respond.