Continuing the previous [article](/learning-graphql-by-building-a-chat-application-part-1) we are going to build our chat application front-end, this article assumes you're familiar with ReactJS, so we'll focus more on GraphQL and Apollo and less in ReactJS, so before we start I suggest you clone the [project repository] (https://github.com/ricardo93borges/graphql-chat-client). Also, you'll notice that there is room for improving usability and style, because, as I said, we are more concerned to use GraphQL with Apollo than any other aspect of this application.

### Initial setup

Let's get started, we'll develop three features: Login, contacts list, and conversation. The application flow is very simple, the user, after login, will choose a contact in a contacts list to start a conversation and will start sending messages (login > contacts list > chat).

The quick way to start our application would use Apollo Boost, but it doesn't have support for subscriptions, so we need to configure the Apollo Client manually, we'll put all this configuration in `api.js` file:

```js
// src/api.js 

import { InMemoryCache } from 'apollo-cache-inmemory'
import { getMainDefinition } from 'apollo-utilities'
import { WebSocketLink } from 'apollo-link-ws'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { split } from 'apollo-link'

/**
* Web socket configuration that we'll use in our subscriptions
* We can send connection params in the `options` property, we'll see another way
* to send these params later
*/
const wsLink = new WebSocketLink({
  uri: process.env.REACT_APP_API_WS_URL,
  options: {
    reconnect: true,
    connectionParams: () => ({
      Authorization: `Bearer ${localStorage.getItem('token')}`
    })
  }
})

/**
* HTTP configuration that we'll use in any other request
*/
const httpLink = new HttpLink({
  uri: process.env.REACT_APP_API_URL,
  // It is possible to set headers here too:
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`
  }
})

const link = split(({ query }) => {
  const definition = getMainDefinition(query)
  return (
    definition.kind === 'OperationDefinition' &&
    definition.operation === 'subscription'
  )
},
  wsLink,
  httpLink
)

export const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
})

```

Don't forget to edit the environment variables in `.env` file to match your local configurations, there are only two, probably you'll use the same values that are in `.env.sample` file.

Next, in `index.js` file we import the configured Apollo Client and provide it to   `<ApolloProvider>` component:

```js
// src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { ApolloProvider } from '@apollo/react-hooks'
import * as serviceWorker from './serviceWorker'
import { client } from './api'
import { App } from './App'

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
)

serviceWorker.unregister()
``` 

In the `<App>` component there are only our routes:

```js
// src/App.js

import 'milligram'
import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import { Header } from './components/Header'
import { Chat } from './pages/chat'
import { Login } from './pages/login'
import { Contacts } from './pages/contacts'

export const App = () => {
  return (
    <div className='container'>
      <BrowserRouter forceRefresh={true}>
        <Header />
        <Switch>
          <Route exact path='/' component={Login} />
          <Route path='/login' component={Login} />
          <Route path='/contacts' component={Contacts} />
          <Route path='/chat/:id' component={Chat} />
        </Switch>
      </BrowserRouter>
    </div>
  )
}
```

### Apollo Client's React Hooks

Before we continue, some code snippets will have some parts omitted, but I put a link to complete code after the snippet when needed.

Apollo client provides three hooks for queries, mutations, and subscriptions, the first hook we'll use is `useMutation` on the login page, so the user will enter his email, password and click on the login button, then the `LOGIN` mutation will be executed:

```js
// src/pages/login/index.js

import React, { useEffect } from 'react'
import { useMutation } from '@apollo/react-hooks'
import { LOGIN } from './mutations'

export const Login = ({ history }) => {
  let email
  let password
  const [login, { data }] = useMutation(LOGIN)

  return (
    <div className='row'>
      <div className='column column-50 column-offset-25'>
        <form>
          {/* ... */}
          <div className='row'>
            <div className='column column-50 column-offset-25'>
              <button
                className='float-right'
                onClick={e => {
                  e.preventDefault()
                  login({ variables: { email: email.value, password: password.value } })
                }}
              >
                Login
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  )
}
```
[login page component](https://github.com/ricardo93borges/graphql-chat-client/blob/master/src/pages/login/index.js)

Login mutation:

```js
import { gql } from 'apollo-boost'

export const LOGIN = gql`
  mutation login($email: String!, $password: String!) {
    login(email: $email, password: $password)
  }
`
```

It is simple like that, you call `useMutation`, pass it a mutation string that represents the mutation and it returns a function and the possible data from the mutation, in this case, `login` and `data`, you call the `login` function with some variables and it is done.

We are not creating a register page, I'll leave this challenge for you, or you can create a user on GraphQL playground.

Moving on to the contacts page we will use the `useQuery` hook, which is quite straightforward we pass it a GraphQL query string, when the component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, and `data` properties:

```js
// src/pages/contacts/index.js

import React from 'react'
import { useQuery } from '@apollo/react-hooks'
import { USERS } from './queries'

export const Contacts = ({ history }) => {
  const { loading, error, data } = useQuery(USERS, {
    context: {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    }
  })

  if (loading) return 'loading ...'

  if (error) return `Error: ${error.message}`

  return (
    <>
      {data.users.map(user =>
        <div key={user.id} className='row'>
          <div className='column' />
          <div className='column' style={{ textAlign: 'center' }}>
            <button
              className='button button-outline'
              onClick={() => history.push(`/chat/${user.id}`)}
            >
              {user.name}
            </button>
          </div>
          <div className='column' />
        </div>
      )}
    </>
  )
}
```

This time besides the `USERS` query string we pass it the Bearer token, `useQuery`, like the other hooks, accepts other arguments, refer to the [documentation](https://www.apollographql.com/docs/react/data/queries/) for more details.

Here is the `USERS` query:

```js
// src/pages/contacts/queries.js

import { gql } from 'apollo-boost'

export const USERS = gql`
  query Users {
    users {
      id
      name
      email
    }
  } 
`
```

The next page is the chat page, there are more components on this page then in the others, let's start with the main component:

```js
// src/pages/chat/index.js

import React from 'react'
import { useQuery } from '@apollo/react-hooks'
import { CONVERSATION } from './queries'
import { MESSAGES_SUBSCRIPTION } from './subscription'
import { MessageList } from './components/MessageList'
import { SendForm } from './components/SendForm'

const handleNewMessage = (subscribeToMore) => {
  subscribeToMore({
    document: MESSAGES_SUBSCRIPTION,
    updateQuery: (prev, { subscriptionData }) => {
      if (!subscriptionData.data) return prev
      const newMessage = subscriptionData.data.messageSent

      return {
        conversation: [...prev.conversation, newMessage]
      }
    }
  })
}

export const Chat = ({ match }) => {
  const options = {
    context: {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    },
    variables: {
      cursor: '0',
      receiverId: match.params.id
    },
  }

  const { subscribeToMore, ...result } = useQuery(CONVERSATION, options)

  return (
    <>
      <div
        className='row'
        style={{
          height: window.innerHeight - 250,
          overflowY: 'scroll',
          marginBottom: 10
        }}>
        <div className='column'>
          <MessageList
            {...result}
            subscribeToNewMessages={() => handleNewMessage(subscribeToMore)}
          />
        </div>
      </div>
      <SendForm receiverId={match.params.id} />
    </>
  )
}
```

Every time a user sends a message we want to show that message along with the previous ones, to do that we can use the function `subscribeToMore` that is available on every query result and will be called every time the subscription returns. The function `handleNewMessage` will handle the new messages inserting them into the list of messages.

Below are the GraphQL queries, mutations, subscriptions, and fragments used in the chat page, a fragment is a shared piece of query logic:

```js
// src/pages/chat/queries.js

import { gql } from 'apollo-boost'
import { MESSAGE } from './fragments'

export const MESSAGES = gql`
  query Messages($cursor: String!) {
    messages(cursor: $cursor) {
      ...Message
    }
  } 
  ${MESSAGE}
`

export const CONVERSATION = gql`
  query Conversation($cursor: String!, $receiverId: ID!) {
    conversation(cursor: $cursor, receiverId: $receiverId) {
      ...Message
    }
  } 
  ${MESSAGE}
`
```

```js
// src/pages/chat/subscription.js

import { gql } from 'apollo-boost'
import { MESSAGE } from './fragments'

export const MESSAGES_SUBSCRIPTION = gql`
  subscription messageSent {
    messageSent {
      ...Message
    }
  }
  ${MESSAGE}
`
```

```js
// src/pages/chat/mutations.js

import { gql } from 'apollo-boost'
import { MESSAGE } from './fragments'

export const SEND_MESSAGE = gql`
  mutation sendMessage($sendMessageInput: SendMessageInput!) {
    sendMessage(sendMessageInput: $sendMessageInput){
      ...Message
    }
  }
  ${MESSAGE}
`
```

```js
// src/pages/chat/fragments.js

import { gql } from 'apollo-boost'

export const USER = gql`
  fragment User on User {
    id
    name
    email
  }
`

export const MESSAGE = gql`
  fragment Message on Message {
    id
    message
    sender {
      ...User
    }
    receiver {
      ...User
    }
  }
  ${USER}
`
```

The `MessageList` component is responsible for rendering the messages:

```js
// src/pages/chat/components/MessageList.js

import React, { useEffect, useState } from 'react'
import { MessageItemSender } from './MessageItemSender'
import { MessageItemReceiver } from './MessageItemReceiver'
import { decode } from '../../../session'

export const MessageList = (props) => {
  const [user, setUser] = useState(null)

  useEffect(() => {
    setUser(decode())
    props.subscribeToNewMessages()
  }, [])

  if (!props.data) { return <p>loading...</p> }

  return props.data.conversation.map(message =>
    user.id === parseInt(message.sender.id, 10)
      ? <MessageItemSender key={message.id} message={message} />
      : <MessageItemReceiver key={message.id} message={message} />
  )
}
```

You can find the `MessageItemSender` and `MessageItemReceiver` [here](https://github.com/ricardo93borges/graphql-chat-client/tree/master/src/pages/chat/components).

The last component is the `SendForm` it is responsible for sending messages, and its behavior is similar to the login component:

```js
// src/pages/chat/components/SendForm.js

import React from 'react'
import { useMutation } from '@apollo/react-hooks'
import { SEND_MESSAGE } from '../mutations'

export const SendForm = ({ receiverId }) => {
  let input
  const [sendMessage] = useMutation(SEND_MESSAGE)

  return (
    <div className='row'>
      <div className='column column-80'>
        <input type='text' ref={node => { input = node }} />
      </div>
      <div className='column column-20'>
        <button onClick={e => {
          e.preventDefault()
          sendMessage({
            variables: {
              sendMessageInput: {
                receiverId,
                message: input.value
              }
            }
          })
        }}
        >
          Send
      </button>
      </div>
    </div>
  )
}

```

This is it, to see the app working you could create two users and login with each account in different browsers and send messages to each other.

Continuing the previous article we are going to build our chat application front-end.

Learning GraphQL by building a chat application - Part 2

When I decided to learn GraphQL I knew that the best way to do it was implementing its concepts, so I figure out that develop a chat application were a way to achieve my goal because would allow me to put into practice all GraphQL features, that’s what this post is about: Learning some GraphQL concepts by building a chat application.

Our application will be split into two parts, back-end, and front-end, as well as these posts, in this first post we will develop the server-side, to do so we’ll use NodeJS, Apollo Server, and of course GraphQL, we also will need a database and a query builder module, I used Knex and MySQL.

Before we continue, all the code is in this [repository](https://github.com/ricardo93borges/graphql-chat-server).

### Initial setup

Ok, first things first, let's start by creating the project and installing its dependencies.

Inside project folder:

```npm init```

And:

```npm i apollo-server bcrypt dotenv graphql jsonwebtoken knex lodash mysql```

``` npm i --save-dev @babel/cli @babel/core @babel/node @babel/plugin-transform-runtime @babel/preset-env babel-jest jest nodemon standard ```

In the scripts section of `package.json` put the following commands:

```
   "start": "nodemon --exec babel-node ./src/index.js",
    "test": "jest",
    "test:watch": "jest --watch",
    "migrate": "knex migrate:latest",
    "unmigrate": "knex migrate:rollback",
    "seed": "knex seed:run",
    "lint": "standard",
    "lint:fix": "standard --fix"
```

In the root folder create a `.babelrc` file:

```
{
  "presets": [
    "@babel/preset-env"
  ],
  "env": {
    "test": {
      "plugins": [
        "@babel/plugin-transform-runtime"
      ]
    }
  }
}
```

Also in the root folder create a `.env` file, this file contains the project’s environment variables: 

```
NODE_ENV=development

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=toor
DB_NAME=chat

SECRET=secret
```

The first variable is the environment, let's leave it as `development` for now, the next four variables is database host, user, password, and name, for these you can set the values accordingly to your database configuration. The last one is the secret value that we’ll use later in the authentication.

Feel free to configure any relational database, I used MySQL, if want to use another, like PostgreSQL, you'll just have to do a different setup in the `knexfile.js`.

### Database and models

In this section we’ll configure our database and implement our models, in the root folder create a `knexfile.js` file, it contains database configuration for development, test, and production environments:

```js
require('dotenv').config()

module.exports = {

  development: {
    client: 'mysql',
    connection: {
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASSWORD,
      database: process.env.DB_NAME
    },
    migrations: {
      directory: './src/data/migrations'
    },
    seeds: { directory: './src/data/seeds' }
  },

  test: {
    client: 'mysql',
    connection: {
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASSWORD,
      database: process.env.DB_NAME
    },
    migrations: {
      directory: './src/data/migrations'
    },
    seeds: { directory: './src/data/seeds' }
  },

  production: {
    client: 'mysql',
    connection: {
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASSWORD,
      database: process.env.DB_NAME
    },
    migrations: {
      directory: './src/data/migrations'
    },
    seeds: { directory: './src/data/seeds' }
  }
}
```

In `src/data/` we can store our database migrations, seeds, and a file that export a database object with the configurations from the `knexfile.js`:

```js

# src/data/db.js

import knex from 'knex'
import knexfile from '../../knexfile'

const env = process.env.NODE_ENV || 'development'
const configs = knexfile[env]
const database = knex(configs)

export default database
```

Now let’s create our migrations, run: 

`knex migrate:make user`
`knex migrate:make message`

The generated files are in the directory configured in `knexfile.js`, they must have the following contents:

```js
// src/data/migrations/20200107121031_user.js

exports.up = (knex) =>
  knex.schema.createTable('user', table => {
    table.bigIncrements('id').unsigned()
    table.string('name').notNullable()
    table.string('email').notNullable()
    table.string('password').notNullable()
  })

exports.down = (knex) => knex.schema.dropSchemaIfExists('user')
```

```js
// src/data/migrations/20200107121034_message.js

exports.up = (knex) =>
  knex.schema.createTable('message', table => {
    table.bigIncrements('id').unsigned()
    table.string('message').notNullable()
    table.bigInteger('senderId').unsigned().references('id').inTable('user')
    table.bigInteger('receiverId').unsigned().references('id').inTable('user')
  })

exports.down = function (knex) {
  knex.schema.dropSchemaIfExists('message')
}
```

can run our migrations, the following commands will create `user` and `message` tables in the database and populate it.

`npm run migrate`

Next, we create our models, let’s start by creating the `Model` class, it contains common methods used by other models that will extend it:

```js
// src/model/Model.js

export default class Model {
  constructor (database, table) {
    this.database = database
    this.table = table
  }

  all () {
    return this.database(this.table).select()
  }

  find (conditions) {
    return this.database(this.table).where(conditions).select()
  }

  findOne (conditions) {
    return this.database(this.table).where(conditions).first()
  }

  findById (id) {
    return this.database(this.table).where({ id }).select().first()
  }

  insert (values) {
    return this.database(this.table).insert(values)
  }
}
```

Then we create `User` and `Message` models, notice that in the `User` model there is a method to generate a token using the environment variable `SECRET` that we defined before, also there are methods to find a user by a token and to retrieve a user's messages.

```js
// src/model/User.js

import Model from './Model'
import bcrypt from 'bcrypt'
import jwt from 'jsonwebtoken'

export class User extends Model {
  constructor (database) {
    super(database, 'user')
  }

  async hash (password) {
    return bcrypt.hash(password, 10)
  }

  async compare (hash, password) {
    return bcrypt.compare(password, hash)
  }

  generateToken (user) {
    /* knex return a RowDataPacket object and jwt.sign function
      expects a plain object, stringify and parse it back does the trick */
    return jwt.sign(
      JSON.parse(JSON.stringify(user)),
      process.env.SECRET,
      {
        expiresIn: 86400
      }
    )
  }

  async getUserByToken (token) {
    try {
      const decoded = jwt.verify(token, process.env.SECRET)
      return decoded
    } catch (error) {
      console.log(error)
      return null
    }
  }

  async getMessages(senderId, lastId) {
    return this.database('message')
      .where('id', '>', lastId)
      .andWhere(q => q.where({ senderId: senderId })
        .orWhere({ receiverId: senderId }))
      .limit(10)
  }
```

```js
// src/model/Message.js

import Model from './Model'

export class Message extends Model {
  constructor (database) {
    super(database, 'message')
  }

  async getConversation (senderId, receiverId, lastId) {
    return this.database('message')
      .where('id', '>', lastId)
      .andWhere({ senderId })
      .andWhere({ receiverId })
      .limit(10)
  }

}
```

Now we have to export all those models, for the sake of organization, I’ve created a `index.js` file in `src/model` that export an object `models` containing all our models.

```js
// src/model/index.js

import database from '../data/db'
import { User } from '../model/User'
import { Message } from '../model/Message'

const user = new User(database)
const message = new Message(database)

const models = {
  user,
  message
}

export default models
```


### Schema

Finally, we’ll deal with GraphQL, let’s start with the schema, but what is the schema? The schema uses GraphQL schema language to define a set of types that our application will provide, a type can be, among others, a query, a mutation, a subscription, an object type, or a scalar type.

The query type defines the possible queries that our application will provide, for example, fetch all messages.

**Mutation type** is like queries but allows to modify data, for example, send a message.

**Subscription** allows the server to send data to a client when an event happens, usually is implemented with WebSockets, for example, in our chat application when a client sends a message, the receiver client must receive that message without request it to the server.

**Object type** defines an object that our application allows to be fetched, like user or message.

And **scalar types**, well, Object type has fields and these fields must have a value of some type, like string or int, these types are scalar types, the possible scalar types are Int, String, Float, Boolean, and ID. In some GraphQL implementations is possible to specify custom scalar types. When we use *!* means that the field is non-nullable and our service promises to return a non-nullable value. If we want to specify that our service will return an array we use *[]*, for example, `[String]!`.

Our GraphQL schema could be defined entirely in a single file, but as our application grows, that file would become a mess, so I decide to separate the schema into files that represent entities, so we’ll have a file to define user schema and another to define message schema, also there will be a file to bring all schema together, let’s start with this file:

```js
// src/schema/index.js

import { merge } from 'lodash'
import { gql, makeExecutableSchema } from 'apollo-server'
import {
  typeDef as User,
  resolvers as userResolvers
} from './user'

import {
  typeDef as Message,
  resolvers as messageResolvers
} from './message'

const Query = gql`
  type Query {
    _empty: String
  }
  type Mutation {
    _empty: String
  }
  type Subscription {
    _empty: String
  }
`
export const schema = makeExecutableSchema({
  typeDefs: [Query, User, Message],
  resolvers: merge(userResolvers, messageResolvers)
})

``` 

Next, we create the user and message schemas, you will notice that in each file there is an object called `resolvers` we will talk about it in a bit. Also notice that when we define the schema in the const `typeDef` we are extending the types Query, Mutation, and Subscription, we have to do this way because a GraphQL schema must have only one of each of these types.

```js
// src/schema/message.js

import { gql } from 'apollo-server'

export const subscriptionEnum = Object.freeze({
  MESSAGE_SENT: 'MESSAGE_SENT'
})

export const typeDef = gql`
  extend type Query {
    messages(cursor: String!): [Message!]!
    conversation(cursor: String!, receiverId: ID!): [Message!]!
  }
  extend type Subscription {
    messageSent: Message
  }
  extend type Mutation {
    sendMessage(sendMessageInput: SendMessageInput!): Message!
  }
  type Message {
    id: ID!
    message: String!
    sender: User!
    receiver: User!
  }
  input SendMessageInput {
    message: String!
    receiverId: ID!
  }
`

export const resolvers = {
  Query: {
    messages: async (parent, args, { models, user }, info) => {
      if (!user) { throw new Error('You must be logged in') }

      const { cursor } = args
      const users = await models.user.all()
      const messages = await models.user.getMessages(user.id, cursor)

      const filteredMessages = messages.map(message => {
        const sender = users.find(user => user.id === message.senderId)
        const receiver = users.find(user => user.id === message.receiverId)
        return { ...message, sender, receiver }
      })

      return filteredMessages
    },

    conversation: async (parent, args, { models, user }, info) => {
      if (!user) { throw new Error('You must be logged in') }

      const { cursor, receiverId } = args
      const users = await models.user.all()
      const messages = await models.message.getConversation(user.id, receiverId, cursor)

      const filteredMessages = messages.map(message => {
        const sender = users.find(user => user.id === message.senderId)
        const receiver = users.find(user => user.id === message.receiverId)
        return { ...message, sender, receiver }
      })

      return filteredMessages
    }
  },

  Subscription: {
    messageSent: {
      subscribe: (parent, args, { pubsub, user }, info) => {
        if (!user) { throw new Error('You must be logged in') }

        return pubsub.asyncIterator([subscriptionEnum.MESSAGE_SENT])
      }
    }
  },

  Mutation: {
    sendMessage: async (parent, args, { models, user, pubsub }, info) => {
      if (!user) { throw new Error('You must be logged in') }

      const { message, receiverId } = args.sendMessageInput

      const receiver = await models.user.findById(receiverId)

      if (!receiver) { throw new Error('receiver not found') }

      const result = await models.message.insert([{
        message,
        senderId: user.id,
        receiverId
      }])

      const newMessage = {
        id: result[0],
        message,
        receiver,
        sender: user
      }

      pubsub.publish(subscriptionEnum.MESSAGE_SENT, { messageSent: newMessage })

      return newMessage
    }
  }
}
```

```js
// src/schema/user.js

import { gql } from 'apollo-server'

export const typeDef = gql`
  extend type Query {
    users: [User!]!
  }
  extend type Mutation {
    createUser(createUserInput: CreateUserInput!): User!
    login(email: String!, password: String!): String!
  }
  type User {
    id: ID!
    name: String!
    email: String!
    password: String!
  }
  input CreateUserInput {
    name: String!
    email: String!
    password: String!
  }
`

export const resolvers = {
  Query: {
    users: async (parent, args, { models, user }, info) => {
      if (!user) { throw new Error('You must be logged in') }

      const users = await models.user.all()
      return users
    }
  },

  Mutation: {
    createUser: async (parent, args, { models }, info) => {
      const { name, email, password } = args.createUserInput
      const user = await models.user.findOne({ email })

      if (user) { throw new Error('Email already taken') }

      const hash = await models.user.hash(password)

      const result = await models.user.insert([{
        name,
        email,
        password: hash
      }])

      return {
        id: result[0],
        password: hash,
        name,
        email
      }
    },

    login: async (parent, args, { models }, info) => {
      const { email, password } = args

      const user = await models.user.findOne({ email })

      if (!user) { throw new Error('Invalid credentials') }

      if (!await models.user.compare(user.password, password)) { throw new Error('Invalid credentials') }

      return models.user.generateToken(user)
    }
  }
}
```

Each file has the schema defined in the const `typeDef` and the resolvers for this schema are in the resolver object.

So what are that resolvers objects? Resolvers contain the logic that will be executed when a query, mutation, or subscription defined in our application schema is called. They are functions that accept the following arguments:

**parent** The object that contains the result returned from the resolver on the parent field

**args** The arguments passed to the query, for example, the login mutation receives `email` and `password` arguments

**context** Is an object shared by all resolvers, in our application it contains the model object that we defined before and the logged in user.

**info** Contains information about the execution state of the query

So if you want to define the resolvers for the type Query put them in the `Query`, if want to define for Mutation type, put inside the `Mutation` object, and so on.

About pagination, I chose to use cursor-based pagination, you can see in the messages query in message schema, that query accepts a cursor as an argument, yes, we can pass arguments to GraphQL queries, the cursor value is the ID of the last message returned.

Now we have one last thing to do, and that is to define the application entry point (`src/index.js`): 

```js
//src/index.js

import { ApolloServer, PubSub } from 'apollo-server'

import { schema } from './schema'
import models from './model/index'

const pubsub = new PubSub()

const getUser = async (req, connection) => {
  let user = null

  if (req && req.headers.authorization) {
    const token = req.headers.authorization.replace('Bearer ', '')
    user = await models.user.getUserByToken(token)
  } else if (connection && connection.context.Authorization) {
    const token = connection.context.Authorization.replace('Bearer ', '')
    user = await models.user.getUserByToken(token)
  }

  return user
}

const server = new ApolloServer({
  schema,
  context: async ({ req, res, connection }) => {
    return {
      models,
      pubsub,
      user: await getUser(req, connection)
    }
  }
})

server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`)
})


```

Here we create an instance of ApolloServer with the schema we defined before, in the option `context` we set which resources will be available for the resolvers in the context argument before we return these resources we check if there is a logged in user using the token that we will receive from the request if you use `express` you can put the logic of fetching a user by a token in a middleware like in this [example](https://github.com/ricardo93borges/graphql-chat-server/blob/express/src/index.js)

The server will run in the default URL `http://localhost:4000/`, where you can test the application making some queries in GraphQL playground, you can learn more about [here](https://graphql.org/learn/queries/).

In the [part two](/learning-graphql-by-building-a-chat-application-part-2) we will develop the front-end using Apollo Client and ReactJS.


Learning some GraphQL concepts by building a chat application.

Ricardo Borges

Learning GraphQL by building a chat application - Part 2

Learning GraphQL by building a chat application - Part 1