DEV Community: Marlon Decosta

Let's Build A Currency Exchange Part II

Marlon Decosta — Mon, 19 Aug 2019 11:38:04 +0000

In this half of the tutorial we'll focus on the frontend. The code for this project is on my GitHub. You can find the first half of this article here. We'll store the code for our frontend in a folder named client. Create client at the root level, cd into this folder and run the following command in the terminal:

npx create-react-app .

We use npx so that we don't have to install create-react-app globally. Run the following command in your terminal and let's get our dependencies:

npm i @apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link-http graphql-tag react-chartjs-2 chart.js react-router-dom

With our dependencies in tow, let's do a little spring cleaning. Delete logo.svg, serviceWorker.js, App.test.js and App.css. Now remove their imports (and all those weird semicolons galavanting about) from index.js and App.js. Afterwards, adjust index.js such that it resembles the below code:

// index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { ApolloClient } from 'apollo-client'
import { ApolloProvider } from '@apollo/react-hooks'
import { InMemoryCache } from 'apollo-cache-inmemory' 
import { HttpLink } from 'apollo-link-http'

import App from './App'
import './index.css'

const cache = new InMemoryCache() 
const client = new ApolloClient({
  cache,
  link: new HttpLink({
    uri: 'http://localhost:4000/graphql',
    credentials: 'include' 
  })
})

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

First, we handle our imports. Then we create a new instance of InMemoryCache and add it to our ApolloClient configuration Object. We use HttpLink to hit our GraphQL API and just as we did in the GraphQL Playground, we add credentials: 'include' to ensure that our cookie is sent along with every request.

Inside of our render function we wrap everything with React Router's BrowserRouter. react-router describes BrowserRouter as, "A router that uses the HTML5 history API to keep your UI in sync with the URL."

We pass ApolloProvider our new instance of ApolloClient so that later we can consume it (akin to the React Context API). As I write this @apollo/react-hooks is a nice ripe age of one day old. This is a minified version of react-apollo which doesn't offer render prop functionality, but reduces bundle size by 50%!

Open up App.js and add the following code:

// App.js

import React from 'react'
import { Route } from 'react-router-dom'

import Landing from './pages/Landing'

const App = () => <Route exact path='/' component={ Landing } />

export default App

React Router's Route component allows us to define a routes path, and assign said path a component to be rendered. In our case this component is Landing. Create a pages folder inside of the src folder. Inside pages create a new file and name it Landing.js. Insert the following code:

// Landing.js

import React from 'react'

const Landing = () => <div>Hello world!</div>

export default Landing

Once more, we demonstrate our respect for tradition and muster our most majestic, 'Hello world' yet! Nothing quite tucks me in like a well-groomed, "Hello world!"

Inside the src folder, create another folder and name it graphql. Inside of this folder create two subfolders: mutations and queries. Inside of queries create a new file and name it currencyPairInfo.js.

Add the following code:

// currencyPairInfo.js

import gql from 'graphql-tag'

export const CURRENCY_PAIR_INFO = gql`
  query CurrencyPairInfo($fc: String, $tc: String) {
    currencyPairInfo(tc: $tc, fc: $fc) {
      fromCurrency 
      fromCurrencyName
      toCurrency
      toCurrencyName
      exchangeRate
      lastRefreshed
      timeZone
      bidPrice
      askPrice
    }
  }
`

First, we import gql from graphql-tag so that we can define our mutations and queries. Inside of this file we're doing the exact same thing we did in the GraphQL Playground, except we add an additional name (CurrencyPairInfo) to our query and further describe the shape of our schema. Finally, we store this query in the constant CURRENCY_PAIR_INFO.

Now that we have our query, let's return to Landing.js and use it.

// Landing.js

import React, { useState } from 'react'
import { useQuery } from '@apollo/react-hooks'

import { CURRENCY_PAIR_INFO } from '../graphql/queries/currencyPairInfo'

const Landing = () => {
  const [ fc, setFc ] = useState('EUR'),
        [ tc, setTc ] = useState('USD'),
        { data, loading, error, refetch } = useQuery(CURRENCY_PAIR_INFO, {
          variables: { fc, tc }
        })

  if(loading) return <p>Loading...</p>
  if(error) return <button onClick={() => refetch()}>Retry</button>

  return data && (
    <section>
      <h3>Currency Exchange</h3>
      <div>
        <select
          value={`${fc}/${tc}`}
          onChange={e => {
            const [ fromCurrency, toCurrency ] = e.target.value.split('/')
            setFc(fromCurrency)
            setTc(toCurrency)
          }}>
          <option>EUR/USD</option>
          <option>JPY/USD</option>
          <option>GBP/USD</option>
          <option>AUD/USD</option>
          <option>USD/CHF</option>
          <option>NZD/USD</option>
          <option>USD/CAD</option>
        </select>
        <button onClick={() => refetch()}>refresh</button>
      </div>
      <div className='landing_pair_data'>
        { data.currencyPairInfo && Object.keys(data.currencyPairInfo).map(val => (
          <div key={val} className='data'>
            <p><span>{val}: </span>{ data.currencyPairInfo[val] }</p>
          </div>
        ))}
      </div>
    </section>
  )
}

export default Landing

We import useQuery from @apollo/react-hooks, the query we wrote in currencyPairInfo.js and useState from React. Instead of using a class component to initialize state via this.state, and later using setState to update it, we're going to be using the React Hook useState. useState takes the initial state as an argument and returns the current state and a function to update said state. This state will be used to collect user input. We provide our query this input as variables and useQuery returns the response.

The most traded pairs of currencies in the world are called the Majors. They constitute the largest share of the foreign exchange market, about 85%, and therefore they exhibit high market liquidity. The Majors are: EUR/USD, USD/JPY, GBP/USD, AUD/USD, USD/CHF, NZD/USD and USD/CAD. These are the currency pairs we'll provide to our users.

We create a select list, each option providing the variables to our query. These options make up the Majors. Apollo provides a refetch function that will reload the given query. We place this function in a button so that onClick the user can get up-to-date data. Take heed not to ping the Alpha Vantage API too often. If you send too many request, they'll graciously provide you with a timeout lasting a few seconds. Just enough time to ponder your insolence.

Our data is returned to us via data.currencyPairInfo. We map over said data and provide it to the DOM. You'll notice we're rendering __typename: PairDisplay. Apollo Client uses __typename and id fields to handle cache updates. If you query a different currency pair, then query the original pair again, you'll notice that the previous pairs data is instantly available via apollo-cache-inmemory.

I can't stare at our data pressed up against the left margin like this. Head into index.css and just add a quick text-align: center to the body.

With that quick aside, let's clean up Landing.js. Create a new folder in src and call it components. Inside of components create a pairs folder. Inside of pairs create a new file SelectList.js and insert the following:

// SelectList.js

import React from 'react'

const SelectList = ({ fc, setFc, tc, setTc }) => (
  <select
    value={`${fc}/${tc}`}
    onChange={e => {
      const [ fromCurrency, toCurrency ] = e.target.value.split('/')
      setFc(fromCurrency)
      setTc(toCurrency)
    }}>
    <option>EUR/USD</option>
    <option>JPY/USD</option>
    <option>GBP/USD</option>
    <option>AUD/USD</option>
    <option>USD/CHF</option>
    <option>NZD/USD</option>
    <option>USD/CAD</option>
  </select>
)

export default SelectList

Back in Landing.js replace select with SelectList and pass the necessary props.


import React, { useState } from 'react'
import { useQuery } from '@apollo/react-hooks'

import { CURRENCY_PAIR_INFO } from '../graphql/queries/currencyPairInfo'
+import SelectList from '../components/SelectList'

const Landing = () => {
  const [ fc, setFc ] = useState('EUR'),
        [ tc, setTc ] = useState('USD'),
        { data, loading, error, refetch } = useQuery(CURRENCY_PAIR_INFO, {
          variables: { fc, tc }
        })

  if(loading) return <p>Loading...</p>
  if(error) return <button onClick={() => refetch()}>Retry</button>

  return data && (
    <section>
      <h3>Currency Exchange</h3>
      <div>
+       <SelectList fc={fc} tc={tc} setFc={setFc} setTc={setTc} />
        <button onClick={() => refetch()}>refresh</button>
      </div>
      <div className='landing_pair_data'>
        { data.currencyPairInfo && Object.keys(data.currencyPairInfo).map(val => (
          <div key={val} className='data'>
            <p><span>{val}: </span>{ data.currencyPairInfo[val] }</p>
          </div>
        ))}
      </div>
    </section>
  )
}

export default Landing

Much better! Now that we're receiving data from the Aplha Vantage API let's get to navigation. Open up App.js and make the following adjustments:

// App.js

import React from 'react'
import { Route, Switch } from 'react-router-dom'

import Landing from './pages/Landing'
import Navbar from './components/navbar/Navbar'

const App = () => (
  <main>
    <div className='navbar'><Navbar /></div>
    <Switch>
      <Route exact path='/' component={ Landing } />
    </Switch>
  </main>
)

export default App

We import Switch from react-router-dom and a file named Navbar that we're about to create. The Switch component renders the first child (Route or Redirect) that matches a routes path and displays it.

Inside of components create a new folder and call it navbar. Inside create a new file named Navbar.js and insert the following:

// Navbar.js

import React from 'react'
import { NavLink } from 'react-router-dom'

import './Navbar.css'

const Navbar = () => (
  <div className='navigation'>
    <header><NavLink exact to='/'>Forex</NavLink></header>
    <ul>
      <li><NavLink exact to="/login">Login</NavLink></li>
      <li><NavLink exact to='/register'>Sign Up</NavLink></li>
      <li>Logout</li>
    </ul>
  </div>
)

export default Navbar

This article is not about styling. I wanted to be careful not to pollute the codebase with styled components, making it both time consuming and harder for some to reason about the logic. For this reason, I've decided to use only two CSS files: index.css and Navbar.css. We'll be using very little CSS — just enough for dark mode. 😎

Inside of the navbar folder create Navbar.css and insert the below code:

/* Navbar.css */

.navbar { margin-bottom: 55px; }

.navigation {
  position: fixed;
  left: 0;
  top: 0;
  background: var(--secondary-color);
  width: 100vw;
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navigation header a {
  text-decoration: none;
  color: var(--header-text-color);
  margin-left: 10px;
}
.navigation ul {
  display: flex;
  list-style: none;
  margin-right: 15px;
}

.navigation li {
  margin: 0 15px;
  color: var(--header-text-color);
}
.navigation li:hover {
  cursor: pointer;
  color: var(--main-color);
}

.navigation a {
  text-decoration: none;
  color: var(--header-text-color);
}
.navigation a:hover,
.navigation a:active,
.navigation a.active {
  color: var(--main-color);
}

Adjust index.css to the following:

/* index.css */

/* Global */

* {
  --main-color: rgb(0,0,0);
  --secondary-color: rgb(55,131,194);
  --text-color: rgba(200,200,200, 0.6);
  --header-text-color: rgb(200,200,200);
}

body {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  background: var(--main-color);
  text-align: center;
  box-sizing: border-box;
}

a { text-decoration: none;  color: rgb(0,0,0); }
section { padding-top: 50px; }
span { color: var(--secondary-color); }
p { color: var(--text-color); font-size: 14px; }
p:hover { color: rgba(200,200,200, 0.4); }
h1,h2, h3, h4 { color: var(--header-text-color); }
button, select { cursor: pointer; }


/* Landing && Pair */

.landing_pair_data {
  margin: 20px 0 20px calc(50% - 170px);
  padding: 20px;
  width: 300px;
  border-radius: 20px;
  box-shadow: 1px 1px 1px 1px var(--secondary-color), 
    -1px -1px 1px 1px var(--secondary-color);
}

.data {
  border-bottom: 1px solid var(--secondary-color);
  width: 280px;
  margin-left: calc(50% - 140px);
  text-align: start;
  text-transform: capitalize;
  padding: 2px 2px 2px 0;
}

.modal {
  position: absolute;
  background: rgb(225,225,225);
  color: var(--main-color);
  width: 280px;
  left: calc(50% - 160px);
  top: 25%;
  padding: 20px;
  animation: modal .5s;
}
.modal p {
  color: var(--main-color);
}

@keyframes modal {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* Account  */

.pair_divs {
  padding: 20; 
  border: 1px solid rgba(255,255,255,0.1); 
  border-radius: 5px;
  width: 400px; 
  margin: 10px auto;
}
.pair_divs p {
  text-align: start;
  padding-left: 20px;
}
.pair_divs:hover {
  border: 1px solid rgba(55,131,194, 0.3);
}


/* Chart  */

.chartData {  
  padding-top: 50px;  
  height: calc(100vh - 105px); 
}
.chartData form input,
.chartData form button {
  margin: 10px;
}


/* Login && Register */

.login input,
.register input {
  padding: 5px; 
  margin: 10px 0px; 
  width: 60%;
  max-width: 400px;
  background: var(--main-color);
  color: var(--header-text-color);
  font-size: 13px;
}

.login form,
.register form {
  display: flex; 
  justify-content: center; 
  flex-direction: column; 
  align-items: center;
}

These two files represent the entirety of our CSS. Save your files and take a look at the browser.

Now that we have our navbar, let's create a register route. Inside of graphql/mutations create a new file named register.js and insert the below code:

// graphql/mutations/register.js

import gql from 'graphql-tag'

export const REGISTERMUTATION = gql`
  mutation RegisterMutation($email: String!, $password: String!, $name: String!) {
    register(email: $email, password: $password, name: $name)  
  }
`

Inside components, create a new folder and name it auth. Inside of auth create a new file and name it Register.js. Insert the following:

// components/auth/Register.js

import React, { useState } from 'react'
import { useMutation } from '@apollo/react-hooks'

import { REGISTERMUTATION } from '../../graphql/mutations/register'

export default function Register(props) {
  const [ email, setEmail ] = useState(''),
        [ password, setPassword ] = useState(''),
        [ name, setName ] = useState(''),
        [ register, { error } ] = useMutation(REGISTERMUTATION, {
          variables: { email, password, name }
        })

  return (
    <div className='register'>
      <form onSubmit={ async e => {
        e.preventDefault()
        await register()
        props.history.push('/login')
      }}>
        <h2>Sign Up</h2>
        <input
          required
          name='email'
          type='email'
          value={ email }
          onChange={ e => setEmail(e.target.value) }
          placeholder='Enter your email'
        />
        <input
          required
          type='password'
          value={ password }
          onChange={ e => setPassword(e.target.value) }
          placeholder='Enter your password'
        />
        <input
          required
          type='text'
          value={ name }
          onChange={ e => setName(e.target.value) }
          placeholder='Enter your name'
        />
        { error && <p>{ error.message }</p> }
        <button>SignUp</button>
      </form>
    </div>
  )
}

We use a form to collect the users data and place it in the components state. onSubmit, we pass the state as variables to the register mutation. Since we're setting the emails input type to 'email' and passing the required prop, we won't see the error we threw on the backend. We're not comparing passwords so there's no error to be thrown there. The only error we created that will make it to us is 'User already exists.' That's why I'm not checking for individual errors and just displaying the error under all of the inputs.

Open up App.js. Import Register.js and create the Register components Route.

// App.js

import React from 'react'
import { Route, Switch } from 'react-router-dom'

import Landing from './pages/Landing'
import Navbar from './components/navbar/Navbar'
import Register from './components/auth/Register'

const App = () => (
  <main>
    <div className='navbar'><Navbar /></div>
    <Switch>
      <Route exact path='/' component={ Landing } />
      <Route path='/register' component={ Register } />
    </Switch>
  </main>
)

export default App

If you navigate to our Register component, you'll be able to register a new user. We can confirm this by checking our database.

Inside of graphql/mutations create a new file, name it login.js and insert the following:

// graphql/mutations/login.js

import gql from 'graphql-tag'

export const LOGINMUTATION = gql`
  mutation LoginMutation($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      id
      email
      name
    }
  }
`

Inside of graphql/queries create a new file named me.js and add the following code:

// graphql/queries/me.js

import gql from 'graphql-tag'

export const MEQUERY = gql`
  query MeQuery {
    me {
      id
      email 
      name
      bankroll
    }
  }
`

Head to the auth folder, create a new file and name it Login.js. Adjust Login.js such that it resembles the below code:

// Login.js

import React, { useState } from 'react'
import { useMutation } from '@apollo/react-hooks'

import { MEQUERY } from '../../graphql/queries/me'
import { LOGINMUTATION } from '../../graphql/mutations/login'

export default function Login(props) {
  const [ email, setEmail ] = useState(''),
        [ password, setPassword ] = useState(''),
        [ login, { error } ] = useMutation(LOGINMUTATION, {
          variables: { email, password },
          update: (cache, { data }) => {
            if(!data || !data.login) return 
            cache.reset()
            cache.writeQuery({
              query: MEQUERY,
              data: { me: data.login }
            })
          }
        })

  return (
    <div className='login'>
      <form onSubmit={ async e => {
        e.preventDefault()
        await login()
        props.history.push('/') 
      }}>
        <h2>Login</h2>
        <input
          required
          name='email'
          type='email'
          value={ email }
          onChange={ e => setEmail(e.target.value) }
          placeholder='Enter your email'
        />
        <input
          required
          type='password'
          value={ password }
          onChange={ e => setPassword(e.target.value) }
          placeholder='Enter your password'
        />
        { error && <p>{ error.message }</p> }
        <button type='submit'>Login</button>
      </form>
    </div>
  )
}

onSubmit we log the user in and redirect them back to the home page. ApolloClient provides us with an update function that we can use to update the cache once a user logs in. Once a user logs in successfully we update the cache such that the me query represents the current user.

From the docs:

The update function is called with the Apollo cache as the first argument. The cache has several utility functions such as cache.readQuery and cache.writeQuery that allow you to read and write queries to the cache with GraphQL as if it were a server. There are other cache methods, such as cache.readFragment, cache.writeFragment, and cache.writeData, which you can learn about in our detailed caching guide if you're curious.

Note: The update function receives cache rather than client as its first parameter. This cache is typically an instance of InMemoryCache, as supplied to the ApolloClient constructor when the client was created. In case of the update function, when you call cache.writeQuery, the update internally calls broadcastQueries, so queries listening to the changes will update. However, this behavior of broadcasting changes after cache.writeQuery happens only with the update function. Anywhere else, cache.writeQuery would just write to the cache, and the changes would not be immediately broadcast to the view layer. To avoid this confusion, prefer client.writeQuery when writing to cache.

The second argument to the update function is an object with a data property containing your mutation result. If you specify an optimistic response, your update function will be called twice: once with your optimistic result, and another time with your actual result. You can use your mutation result to update the cache with cache.writeQuery.

If a user enters an invalid email they will see the HTML error, not ours. If a user enters a valid but incorrect email we throw, 'Email or password is incorrect!' If a user enters an incorrect password, we throw the exact same error, making it harder for a bad actor to decipher which input is incorrect. This being the case, we probably don't want to display the error in the place that it occurs, lest we give away the game.

Open up App.js and make the following adjustments:

// App.js

import React from 'react'
import { Route, Switch } from 'react-router-dom'

import Landing from './pages/Landing'
import Navbar from './components/navbar/Navbar'
import Register from './components/auth/Register'
import Login from './components/auth/Login'

const App = () => (
  <Switch>
    <Route path='/login' component={ Login } />
    <Route path='/' render={() => (
      <main>
        <div className='navbar'><Navbar /></div>
        <Route exact path='/' component={ Landing } />
        <Route path='/register' component={ Register } />
      </main>
    )} />
  </Switch>
)

export default App

Since we're clearing the cache before a user logs in, and the navbar utilizes the me query for authorization, we're going to place the Login component outside of the navbar.

We can now login a user and we are persisting the users session id in a cookie. If you open up your DevTools, under the Application folder, and inside the Cookies tab, you'll see our cookie.

It'd probably be best if we weren't simultaneously displaying both Login and Logout in our navbar. Adjust Navbar.js like so:

// Navbar.js

import React from 'react'
import { NavLink, Redirect } from 'react-router-dom'
import { useQuery } from '@apollo/react-hooks'

import { MEQUERY } from '../../graphql/queries/me'
import './Navbar.css'

const Navbar = () => {
  const { data, loading, error } = useQuery(MEQUERY)

  if(loading) return <p>Loading....</p>
  if(error) return <Redirect to='/login' />
  if(!data) return <p>This is unfortunate</p>

  return (
    <div className='navigation'>
      <header><NavLink exact to='/'>Forex</NavLink></header>
      { !data.me ? (
        <ul>
          <li><NavLink exact to='/login'>Login</NavLink></li>
          <li><NavLink exact to='/register'>SignUp</NavLink></li>
        </ul> ) 
      : (
        <ul>
          <li>Logout</li>
        </ul>
      )}
    </div>
  )
}

export default Navbar

In the case of an error in our me query, we Redirect the user to login. If a user is returned we display Logout, else Login/SignUp. At the moment Logout isn't very useful. We'll start with the mutation. Create a new file named logout.js inside of graphql/mutations and insert the code below.

// graphql/mutations/logout.js

import gql from 'graphql-tag'

export const LOGOUT_MUTATION = gql`
  mutation Logout {
    logout
  }
`

Create Logout.js inside of components/auth and insert the following:

// components/auth/Logout.js

import React from 'react' 
import { useMutation } from '@apollo/react-hooks'
import { withRouter } from 'react-router-dom'

import { MEQUERY } from '../../graphql/queries/me'
import { LOGOUT_MUTATION } from '../../graphql/mutations/logout'

const Logout = props => {
  const [logout] = useMutation(LOGOUT_MUTATION, {
    update: cache => {
      cache.writeQuery({
        query: MEQUERY,
        data: { me: null }
      })
      props.history.push('/')
    }
  })

  return <div onClick={() => logout()}>Logout</div>
}

export default withRouter(Logout)

When a user clicks Logout three things happen:

The logout mutation destroys the session on the req Object.
We update the cache such that the me query returns null.
We redirect the user to the home page.

If a component isn't rendered by React Router (passed as a component prop to a Route), then we won't have access to history.push. React Router's HOC withRouter provides us access to the history Object via props. We utilize props.history.push('/') to navigate the user back to the home page. Don't forget to wrap the Logout component with withRouter when exporting the file.

Import Logout.js into Navbar.js and replace <li><Logout></li> with our new component. With that adjustment thou shalt logout!

We can now focus on allowing users to open long/short positions. Open up Landing.js and make the following adjustments:

// Landing.js

import React, { useState } from 'react'
import { useQuery } from '@apollo/react-hooks'

import { MEQUERY } from '../graphql/queries/me'
import { CURRENCY_PAIR_INFO } from '../graphql/queries/currencyPairInfo'
import SelectList from '../components/pairs/SelectList'
import OpenLongPosition from '../components/positions/OpenLongPosition'

const Landing = () => {
  const [ fc, setFc ] = useState('EUR'),
        [ tc, setTc ] = useState('USD'),
        [ askPrice, setAskPrice ] = useState(0),
        [ bidPrice, setBidPrice ] = useState(0),
        [ showModal, setShowModal ] = useState(false),
        user = useQuery(MEQUERY),
        { data, loading, error, refetch } = useQuery(CURRENCY_PAIR_INFO, {
          variables: { fc, tc }
        })

  if(loading) return <p>Loading...</p>
  if(error) return <button onClick={() => refetch()}>Retry</button>

  return data && (
    <section>
      <h2>Currency Exchange</h2>
      { user.data.me && <p>Available Balance { user.data.me.bankroll.toLocaleString()}.00</p> }
      <div>
        <SelectList fc={fc} tc={tc} setFc={setFc} setTc={setTc} />
        <button onClick={() => refetch()}>Refresh</button>
        { user.data.me && (
          <OpenLongPosition
            fc={fc}
            tc={tc}
            pairData={data}
            askPrice={askPrice}
            setAskPrice={setAskPrice}
            showModal={showModal}
            setShowModal={setShowModal}
        />)}
        <button>Sell</button>
      </div>
      <div className='landing_pair_data'>
        { data.currencyPairInfo && Object.keys(data.currencyPairInfo).map(val => (
          <div key={val} className='data'>
            <p><span>{val}: </span>{ data.currencyPairInfo[val] }</p>
          </div>
        ))}
      </div>
    </section>
  )
}

export default Landing

We import MEQUERY and a file we'll need to create called OpenLongPosition. We integrate useState to store/update the askPrice, bidPrice, and to toggle a modal. After we have our user, we display their bankroll (available funds). If a user alters the currency pair or refreshes the data, we change the state of askPrice and bidPrice accordingly. Finally, if a user is found we display a 'Buy' button (OpenLongPosition).

Inside of graphql/mutations create a new file, name it openPosition.js, and add the below code:

// openPosition.js

import gql from 'graphql-tag'

export const OPENPOSITION = gql`
  mutation OpenPosition(
    $pair: String!, 
    $lotSize: Int!, 
    $openedAt: Float!, 
    $position: String!
  ) {
    openPosition(
      pair: $pair, 
      lotSize: $lotSize, 
      openedAt: $openedAt, 
      position: $position
    ) {
      success
      message
      pair {
        id
        user
        position
        pair
        lotSize
        openedAt
      }
    }
  }
`

In graphql/queries create a new file named getPairs.js and insert the below code:

// graphql/queries/getPairs.js

import gql from 'graphql-tag'

export const GETPAIRS = gql`
  query GetPairs {
    getPairs {
      id
      user
      pair
      lotSize
      openedAt
      closedAt
      pipDif
      profitLoss
      open
      position
      createdAt
      updatedAt
    }
  }
`

In components create a new folder and name it positions. Inside create a new file named OpenLongPosition.js and add the following code:

// OpenLongPosition.js

import React from 'react'
import { Link } from 'react-router-dom'
import { useMutation } from '@apollo/react-hooks'

import { OPENPOSITION } from '../../graphql/mutations/openPosition'
import { MEQUERY } from '../../graphql/queries/me'
import { GETPAIRS } from '../../graphql/queries/getPairs'

const OpenLongPosition = ({
  fc, 
  tc, 
  pairData,
  askPrice,
  setAskPrice,
  showModal,
  setShowModal
}) => {

  const [ openPosition, { data, loading, error }] = useMutation(OPENPOSITION, {
    variables: {
      pair: `${fc}/${tc}`,
      lotSize: 100000,
      openedAt: askPrice,
      position: 'long'
    },
    update: cache => {
      const user = cache.readQuery({ query: MEQUERY })
      user.me.bankroll -= 100000
      cache.writeQuery({
        query: MEQUERY,
        data: { me: user.me }
      })
    },
    refetchQueries: [{ query: GETPAIRS }]
  })

  if(loading) return <p>Loading...</p>
  if(error) return <p>{ error.message }</p>

  return openPosition && (
    <>
      <button onClick={ async () => {
        await setAskPrice(+pairData.currencyPairInfo.askPrice)
        alert('Are you sure you want to buy?')
        await openPosition()
        setShowModal(true)
      }}>
        Buy
      </button>
      { data && data.openPosition.message && showModal && (
        <div className='modal'>
          <button onClick={() => setShowModal(false)}>x</button>
          <p>{ data.openPosition.message }</p>
          <p>Currency Pair: { data.openPosition.pair.pair }</p>
          <p>Lot Size: { data.openPosition.pair.lotSize.toLocaleString() }.00</p>
          <p>Opened At: { data.openPosition.pair.openedAt }</p>
          <p>Position: { data.openPosition.pair.position }</p>
          <Link to={{ pathname: '/account', state: { data } }}>
            <button>Details</button>
          </Link>
        </div>
      )}
    </>
  )
}

export default OpenLongPosition

We pass our mutation the required variables. Once the user clicks the 'Buy' button we'd usually want to display some data and allow them to confirm the purchase. Here we're just using an alert. The user is then displayed a modal describing their transaction and a details button that will redirect them to a page we still need to create — Account. Open up MongoDB Atlas and you'll see the newly created position.

Apollo provides us a number of ways to update the cache after a mutation. We've implemented a few of them in this project. In this component we're utilizing refetchQueries to update our pairs. Let's take a look at the docs:

refetchQueries is the simplest way of updating the cache. With refetchQueries you can specify one or more queries that you want to run after a mutation is completed in order to refetch the parts of the store that may have been affected by the mutation.

We've seen a few of the options that the Mutation hook accepts. Take a peek at the docs for the full list.

Before we get to creating the Account component, let's allow a user to open a short position. Open up components/positions, create a new file named OpenShortPosition.js and add the below code:

// components/positions/OpenShortPosition.js

import React from 'react'
import { Link } from 'react-router-dom'
import { useMutation } from '@apollo/react-hooks'

import { OPENPOSITION } from '../../graphql/mutations/openPosition'
import { MEQUERY } from '../../graphql/queries/me'
import { GETPAIRS } from '../../graphql/queries/getPairs'

const OpenShortPosition = ({
  fc,
  tc,
  pairData,
  bidPrice,
  setBidPrice,
  showModal,
  setShowModal
}) => {
  const [ openPosition, { data, loading, error }] = useMutation(OPENPOSITION, {
    variables: {
      pair: `${fc}/${tc}`, 
      lotSize: 100000, 
      openedAt: bidPrice, 
      position: 'short' 
    },
    update: cache => {
      const user = cache.readQuery({ query: MEQUERY })
      user.me.bankroll -= 100000
      cache.writeQuery({
        query: MEQUERY,
        data: { me: user.me }
      })
    },
    refetchQueries: [{ query: GETPAIRS }]
  })

  if(loading) return <p>Loading...</p>
  if(error) return <p>{ error.message }</p>

  return openPosition && (
    <>
      <button onClick={ async () => {
        await setBidPrice(+pairData.currencyPairInfo.bidPrice)
        alert('Are you sure you want to sell short?')
        await openPosition()
        setShowModal(true) 
      }}>
        Sell
      </button> 
      { data && data.openPosition.message && showModal && ( 
        <div className='modal'>
          <button onClick={() => setShowModal(false)}>x</button>
          <p>{ data && data.openPosition.message }</p>
          <p>Currency Pair: { data.openPosition.pair.pair }</p>
          <p>Lot Size: { data.openPosition.pair.lotSize.toLocaleString() }.00</p>
          <p>Opened At: { data.openPosition.pair.openedAt }</p>
          <p>Position: { data.openPosition.pair.position }</p>
          <Link to={{ pathname: '/account', state: { data } }}>
            <button>Details</button>
          </Link>
        </div>
      )}
    </>
  )
}

export default OpenShortPosition

Here we do the exact same thing we did in OpenLongPosition except we pass bidPrice instead of askPrice and position: short instead of position: long as arguments.

Back in Landing.js replace the 'Sell' button with our newly created OpenShortPosition component.

// Landing.js

import OpenShortPosition from '../components/positions/OpenShortPosition'

{ user.data.me && (
  <OpenShortPosition
    fc={fc}
    tc={tc}
    pairData={data}
    bidPrice={bidPrice}
    setBidPrice={setBidPrice}
    showModal={showModal}
    setShowModal={setShowModal}
/>)}

With that our users are able to sell short. We still need to create our Account component. Let's get to it! In the pages folder create Account.js and add the below code:

// Account.js

import React, { useState } from 'react'
import { useQuery } from '@apollo/react-hooks'
import { Link, Redirect } from 'react-router-dom'

import { GETPAIRS } from '../graphql/queries/getPairs'
import { MEQUERY } from '../graphql/queries/me'

const Account = props => {
  const [ open, setOpen ] = useState(true),
        user = useQuery(MEQUERY),
        { data, loading, error } = useQuery(GETPAIRS)

  if(user.error) return <Redirect to='/login' />
  if(!user.data || !user.data.me) return <p>A man has no name.</p>
  if(loading) return <p>Loading...</p>
  if(!data) return <p>Nothing to show!</p>
  if(error) return <p>{ error.message }</p>

  return (
    <section>
      <h2>{ user.me.name }</h2>
      <div>
        <p><span>Available Balance: </span>{ user.me.bankroll.toLocaleString() }.00</p> 
      </div>
      <br />
      { props.location.state &&  (
        <div>
          <h3>New Position</h3>
          <div className='pair_divs'>
            <p><span>Pair: </span>{ props.location.state.data.openPosition.pair.pair }</p>
            <p><span>Lot Size: </span>{ props.location.state.data.openPosition.pair.lotSize.toLocaleString() }.00</p>
            <p><span>Pip Dif: </span>{ props.location.state.data.openPosition.pair.openedAt }</p>
            <p><span>Position: </span>{ props.location.state.data.openPosition.pair.position }</p>
          </div>
        </div>
      )}
      <br />
      <h3>Currency Pairs</h3>
      <button onClick={() => setOpen(true)}>open</button>
      <button onClick={() => setOpen(false)}>closed</button>
      <div>
      { data.getPairs && data.getPairs.map(pair => pair.open && open && (
        <div className='pair_divs' key={pair.id}>
          <Link to={{ pathname: '/pair', state: { pair, me: user.me } }}>
            { pair.pair && <p><span>Currency Pair: </span>{ pair.pair }</p> }
            { pair.lotSize && <p><span>Lot Size: </span>{ pair.lotSize.toLocaleString() }.00</p> }
            { pair.position && <p><span>Position: </span>{ pair.position }</p> }
            { pair.openedAt && <p><span>Opened At: </span>{ pair.openedAt.toFixed(4) }</p> }
            { pair.createdAt && <p><span>Created At: </span>{ new Date(+pair.createdAt).toLocaleString() }</p> }
            { pair.updatedAt && <p><span>Updated At: </span>{ new Date(+pair.updatedAt).toLocaleString() }</p> }
          </Link>
        </div>
      ))}
      { data.getPairs && data.getPairs.map(pair => !pair.open && !open && (
        <div className='pair_divs' key={ pair.id }>
          <div>
            { pair.pair && <p><span>Currency Pair: </span>{ pair.pair }</p> }
            { pair.lotSize && <p><span>Lot Size: </span>{ pair.lotSize.toLocaleString() }.00</p> }
            { pair.position && <p><span>Position: </span>{ pair.position }</p> }
            { pair.openedAt && <p><span>Opened At: </span>{ pair.openedAt.toFixed(4) }</p> }
            { pair.closedAt && <p><span>Closed At: </span>{ pair.closedAt.toFixed(4) }</p> }
            { <p><span>Pip Dif: </span>{ pair.pipDif || 0 }</p> }
            { <p><span>Profit/Loss: </span>{ pair.profitLoss.toFixed(2) || 0 }</p> }
            { pair.createdAt && <p><span>Created At: </span>{ new Date(+pair.createdAt).toLocaleString() }</p> }
            { pair.updatedAt && <p><span>Updated At: </span>{ new Date(+pair.updatedAt).toLocaleString() }</p> }
          </div>
        </div>
      ))}
      </div>
    </section>
  )
}

export default Account

React Router's Link component allows us to pass state when navigating a user to another view. This is convienient if we wanted to render unique views when coming from certain routes. We use this to display the new position that the user just opened — if any. You could get creative here but we'll keep it simple and just display some data about the new position.

Under the new position (if there is one), we display all of the users positions. Open positions are shown by default, but we provide a button to toggle between open and closed. If the position is open, the user can click on the currency pair. This will navigate them to /pair (which we need to create) and provide further options. This component is a bit verbose. We'll refactor in a moment.

Let's import Account.js into App.js and create its Route.

// App.js

import React from 'react'
import { Route, Switch } from 'react-router-dom'

import Landing from './pages/Landing'
import Navbar from './components/navbar/Navbar'
import Register from './components/auth/Register'
import Login from './components/auth/Login'
import Account from './pages/Account'

const App = () => (
  <Switch>
    <Route path='/login' component={ Login } />
    <Route path='/' render={() => (
      <main>
        <div className='navbar'><Navbar /></div>
        <Route exact path='/' component={ Landing } />
        <Route path='/register' component={ Register } />
        <Route path='/account' component={ Account } />
      </main>
    )} />
  </Switch>
)

export default App

We'll also want Account to be accessible from the Navbar when a user is logged in.

// Navbar.js

return (
  <ul>
    <li><NavLink to='/account'>Account</NavLink></li>
    <li><Logout /></li>
  </ul>
)

When navigating to /account from the navbar you'll notice 'New Position' isn't being displayed. Cool! Now let's refactor Account.js and add some functionality. Inside of components/pairs create a new file named NewPosition.js. Cut the following code from Account.js and insert it into your newly created file.

// components/pairs/NewPosition.js

import React from 'react'

export default function NewPosition({ state }) {
  return (
    <div>
      <h3>New Position</h3>
      <div className='pair_divs' style={{ textAlign: 'center' }}>
        <p><span>Pair: </span>{ state.data.openPosition.pair.pair }</p>
        <p><span>Lot Size: </span>{ state.data.openPosition.pair.lotSize.toLocaleString() }.00</p>
        <p><span>Pip Dif: </span>{ state.data.openPosition.pair.openedAt }</p>
        <p><span>Position: </span>{ state.data.openPosition.pair.position }</p>
      </div>
    </div>
  )
}

In the same folder create a new file and name it Pairs.js. Cut the following code from Account.js and add it to this file.

// components/pairs/Pairs.js

import React from 'react'
import { Link } from 'react-router-dom'

const Pairs = ({ data, open, user }) => (
  <div>
    { data.getPairs && data.getPairs.map(pair => pair.open && open && (
      <div className='pair_divs' key={ pair.id }>
        <Link to={{ pathname: '/pair', state: { pair, me: user.data.me } }}>
          { pair.pair && <p><span>Currency Pair: </span>{ pair.pair }</p> }
          { pair.lotSize && <p><span>Lot Size: </span>{ pair.lotSize.toLocaleString() }.00</p> }
          { pair.position && <p><span>Position: </span>{ pair.position }</p> }
          { pair.openedAt && <p><span>Opened At: </span>{ pair.openedAt.toFixed(4) }</p> }
          { pair.createdAt && <p><span>Created At: </span>{ new Date(+pair.createdAt).toLocaleString() }</p> }
          { pair.updatedAt && <p><span>Updated At: </span>{ new Date(+pair.updatedAt).toLocaleString() }</p> }
        </Link>
      </div>
    ))}
    { data.getPairs && data.getPairs.map(pair => !pair.open && !open && (
      <div className='pair_divs' key={ pair.id }>
        <div>
          { pair.pair && <p><span>Currency Pair: </span>{ pair.pair }</p> }
          { pair.lotSize && <p><span>Lot Size: </span>{ pair.lotSize.toLocaleString() }.00</p> }
          { pair.position && <p><span>Position: </span>{ pair.position }</p> }
          { pair.openedAt && <p><span>Opened At: </span>{ pair.openedAt.toFixed(4) }</p> }
          { pair.closedAt && <p><span>Closed At: </span>{ pair.closedAt.toFixed(4) }</p> }
          { <p><span>Pip Dif: </span>{ pair.pipDif || 0 }</p> }
          { <p><span>Profit/Loss: </span>{ pair.profitLoss.toFixed(2) || 0 }</p> }
          { pair.createdAt && <p><span>Created At: </span>{ new Date(+pair.createdAt).toLocaleString() }</p> }
          { pair.updatedAt && <p><span>Updated At: </span>{ new Date(+pair.updatedAt).toLocaleString() }</p> }
        </div>
      </div>
    ))}
  </div>
)

export default Pairs

Okay. We should implement an addFunds button while we're working on Account.js. Create a new file named addFunds.js inside of graphql/mutations and insert the following:

// graphql/mutations/addFunds.js

import gql from 'graphql-tag'

export const ADDFUNDS = gql`
  mutation ($amount: Int!) {
    addFunds(amount: $amount) {
      success
      message
      bankroll
    }
  }
`

In the components/pairs folder create a new file named AddFunds.js and add the below code:

// components/pairs/AddFunds.js

import React, { useState } from 'react'
import { useMutation } from '@apollo/react-hooks'

import { ADDFUNDS } from '../../graphql/mutations/addFunds'

export default function AddFunds() {
  const [ showModal, setShowModal ] = useState(false),
        [ addFunds, { data, loading, error } ] = useMutation(ADDFUNDS, {
          variables: { amount: 1000000 }
        })

  if(loading) return <p>Loading...</p>
  if(error) return <p>{ error.message }</p>

  return addFunds && (
    <>
      <button onClick={ async () => {
        alert('Are you sure?')
        await addFunds()
        setShowModal(true)
      }}>Add Funds</button>
      { data && data.addFunds.message && showModal && (
        <div className='modal'>
          <button onClick={() => setShowModal(false)}>x</button>
          <p>{ data.addFunds.message }</p>
        </div>
      )}
    </>
  )
}

Usually the user would have some say over how much they deposit. That said, who's making a fuss when we're just out here handing out milli's?

It's high time we got back to Account.js.

// Account.js

import React, { useState } from 'react'
import { useQuery } from '@apollo/react-hooks'
import { Redirect } from 'react-router-dom'

import { GETPAIRS } from '../graphql/queries/getPairs'
import { MEQUERY } from '../graphql/queries/me'
import AddFunds from '../components/pairs/AddFunds'
import Pairs from '../components/pairs/Pairs'
import NewPosition from '../components/pairs/NewPosition'

export default function Account(props) {
  const [ open, setOpen ] = useState(true),
        user = useQuery(MEQUERY),
        { data, loading, error } = useQuery(GETPAIRS)

  if(user.error) return <Redirect to='/login' />
  if(!user.data || !user.data.me) return <p>A man has no name.</p>
  if(loading) return <p>Loading...</p>
  if(!data) return (
    <section>
      <h2>{ user.data.me.name }</h2>
      <div>
        <p><span>Available Balance: </span>{ user.data.me.bankroll.toLocaleString() }.00</p>
        <AddFunds />
      </div>
    </section>
  )
  if(error) return <p>{ error.message }</p>

  return (
    <section>
      <h2>{ user.data.me.name }</h2>
      <div>
        <p><span>Available Balance: </span>{ user.data.me.bankroll.toLocaleString() }.00</p>
        <AddFunds />
      </div>
      { props.location.state && <NewPosition state={ props.location.state } /> }
      <h3>Currency Pairs</h3>
      <button onClick={() => setOpen(true)}>open</button>
      <button onClick={() => setOpen(false)}>closed</button>
      <Pairs data={ data } open={ open } user={ user } />
    </section>
  )
}

First, we handle our imports. Next, we implement useQuery to find out about the user. If there's no getPair data we just display information about the user and the AddFunds button else we display all the data.

Our users can now open positions and add money to their account. Let's allow them to close positions. Once again this starts with a mutation. In graphql/mutations create closePosition.js and add the following:

// graphql/mutations/closePosition.js

import gql from 'graphql-tag'

export const CLOSEPOSITION = gql`
  mutation ClosePosition($id: ID!, $closedAt: Float!) {
    closePosition(id: $id, closedAt: $closedAt) {
      success
      message
      pair {
        id
        user
        pair
        lotSize
        position
        openedAt
        closedAt
        pipDif
        profitLoss
        open
        createdAt
        updatedAt
      }
    }
  }
`

When a user clicks on an open position, they get navigated to /pair. This is where they'll be able to close their positions. In the pages folder, create Pair.js and adjust it such that it resembles the below code:

// Pair.js

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

import { CURRENCY_PAIR_INFO } from '../graphql/queries/currencyPairInfo'
import ClosePosition from '../components/positions/ClosePosition'
import PairDetails from '../components/pairs/PairDetails'

export default function Pair(props) {
  const { createdAt, lotSize, openedAt, pair, position, id } = props.location.state.pair,
        { bankroll, name } = props.location.state.me,
        [ fc, tc ] = pair.split('/'),
        { data, loading, error, refetch } = useQuery(CURRENCY_PAIR_INFO, {
          variables: { fc, tc }
        })

  if(loading) return <p>Loading...</p>
  if(error) return <p>{ error.message }</p>

  const { bidPrice, lastRefreshed, askPrice } = data.currencyPairInfo,
        pipDifLong = (bidPrice - openedAt).toFixed(4),
        pipDifShort = (openedAt - askPrice).toFixed(4),
        potentialProfitLoss = position === 'long'
          ? pipDifLong * lotSize
          : pipDifShort * lotSize,
        date = new Date(lastRefreshed + ' UTC')

  return data && (
    <section>
      <div className='landing_pair_data'>
        <h3>Pair Details</h3>
        <div>
          <p>{ name } your available balance is { bankroll.toLocaleString() }.00</p> 
          <div>
            <button onClick={() => refetch()}>Refresh</button>
            <ClosePosition 
              id={id} 
              bidPrice={bidPrice} 
              askPrice={askPrice} 
              position={position} 
            />
          </div>
        </div>
        <PairDetails
          pair={pair} 
          lotSize={lotSize}
          openedAt={openedAt}
          position={position}
          createdAt={createdAt}
          askPrice={askPrice}
          bidPrice={bidPrice}
          lastRefreshed={date.toLocaleString()}
          pipDifLong={pipDifLong}
          pipDifShort={pipDifShort}
          potentialProfitLoss={potentialProfitLoss}
        />
      </div>
    </section>
  )
}

Once we have our state we pass in the query variables to currencyPairInfo. The response provides the data required to complete our closePosition mutation. Depending on whether the position is long or short, we use either the askPrice or bidPrice to calculate the difference in price since the initial purchase. This difference in price is what we're calling the pip difference (pipDif).

As described by dailyfx.com:

PIP - which stands for Point in Percentage - is the unit of measure used by forex traders to define the smallest change in value between two currencies. This is usually represented by a single digit move in the fourth decimal place. The pip value is calculated by multiplying one pip(0.0001) by the specific lot/contract size. For standard lots this entails 100,000 units of the base currency and for mini lots, this is 10,000 units. For example, looking at EUR/USD, a one pip movement in a standard contract is equal to $10(0.0001 x 100,000).

Each currency pair has its own relative relationship, so we calculate profit/loss by simply comparing the openedAt price to the closedAt price. We calculate the pipDif by first figuring out if the position is long or short. If the position is long we subtract the openedAt price from the bidPrice. Conversely, if the position is short, we subtract the askPrice from the openedAt price. This will provide our pipDif. Once we have the difference in price, we multiply it by the lotSize.

You can see how easily this is calculated once demonstrated visually. For a standard lot (100,000 units) each pip (usually fourth decimal place) movement equates to 10 currency units of profilt/loss.

For a mini lot (10,000 units) we do the same but every pip movement equates to 1 currency unit profit/loss.

It's important to understand that we're not converting one currency to another. We're just betting on which currency will be worth more relative to the other. For clarity, if you wanted to buy (or long) EUR against USD, you'd sell EUR/USD or buy USD/EUR. Conversely, to long USD against the EUR, you'd buy EUR/USD or sell USD/EUR. Rollover (interest) and margin are outside the scope of this tutorial so we'll focus exclusively on the pipDif.

We need to create ClosePosition and PairDetails. Inside of components/positions, create ClosePosition.js and add the following:

// components/positions/ClosePosition.js

import React, { useState } from 'react'
import { useQuery, useMutation } from '@apollo/react-hooks'
import { Link } from 'react-router-dom'

import { CLOSEPOSITION } from '../../graphql/mutations/closePosition'
import { MEQUERY } from '../../graphql/queries/me'
import { GETPAIRS } from '../../graphql/queries/getPairs'

export default function ClosePosition({ id, bidPrice, askPrice, position }) {
  const [ showModal, setShowModal ] = useState(false),
        { refetch  } = useQuery(MEQUERY),
        [ closePosition, { data, loading, error } ] = useMutation(CLOSEPOSITION, {
          variables: position === 'long'
            ? { id, closedAt: +bidPrice } 
            : { id, closedAt: +askPrice },
          refetchQueries: [{ query: GETPAIRS }]
        })

  if(loading) return <p>Loading...</p>
  if(error) return <p>{ error.message }</p>

  return closePosition && (
    <>
      <button onClick={ async () => {
        alert(`Are you sure you want to close your ${
          position === 'long' ? 'long' : 'short' } position?`) 
        await closePosition()
        setShowModal(true)
        refetch()
      }}>
        { position === 'long' ? 'Sell' : 'Buy' }
      </button> 

      { data && data.closePosition.message && showModal && ( 
        <div className='modal'>
          <button onClick={() => setShowModal(false)}>x</button>
          <p>{ data.closePosition.message }</p>
          <Link to='/account'><button>Account</button></Link>
        </div>
      )}
    </>
  )
}

All this file is doing is deciphering whether the position is long or short and providing the closePosition mutation the appropriate variables (pair id and bidPrice/askPrice). The closePosition response message will be displayed via a modal.

We're using the useQuery hook to gain access to the me queries refetch function. We add the refetch method to our button such that after the closePosition mutation runs, refetch will refresh the users data. If we didn't use refetchQueries here, after our mutation runs the open pairs would be up-to-date, but the closed pairs wouldn't be.

In the components folder create PairDetails.js and add the code below:

// components/PairDetails.js

import React from 'react'

const PairDetails = ({
  pair,
  lotSize,
  openedAt,
  position,
  createdAt,
  askPrice,
  bidPrice,
  lastRefreshed,
  pipDifLong,
  pipDifShort,
  potentialProfitLoss
}) => (
  <div>
    <p><span>Currency Pair: </span>{pair}</p>
    <p><span>Lot Size: </span>{lotSize.toLocaleString()}.00</p>
    <p><span>Opened At: </span>{(+openedAt).toFixed(4)}</p>
    <p><span>Position: </span>{position}</p>
    <p><span>Created At: </span>{new Date(+createdAt).toLocaleString()}</p>
    { position === 'long' 
      ? (
        <>
          <br />
          <p><span>Current Bid Price: </span>{(+bidPrice).toFixed(4)}</p>
          <p><span>Last Refreshed: </span>{lastRefreshed}</p>
          <p><span>Current Pip Difference: </span>{pipDifLong}</p>
          <p><span>Potential PL: </span>
            {potentialProfitLoss.toLocaleString()}.00
          </p>
        </> ) 
      : (
        <>
          <br />
          <p><span>Current Ask Price: </span>{(+askPrice).toFixed(4)}</p>
          <p><span>Last Refreshed: </span>{lastRefreshed}</p>
          <p><span>Current Pip Difference: </span>{pipDifShort}</p>
          <p><span>Potential PL: </span>
            {potentialProfitLoss.toLocaleString()}.00
          </p>
        </>
      )
    }
  </div>
)

export default PairDetails

We display the open positions data. We also display the current askPrice/bidPrice and the potentialProfitLoss that closing the position would provide.

Import Pair.js into App.js and create its Route.

// App.js

import React from 'react'
import { Route, Switch } from 'react-router-dom'

import Landing from './pages/Landing'
import Navbar from './components/navbar/Navbar'
import Register from './components/auth/Register'
import Login from './components/auth/Login'
import Account from './pages/Account'
import Pair from './pages/Pair'

const App = () => (
  <Switch>
    <Route path='/login' component={ Login } />
    <Route path='/' render={() => (
      <main>
        <div className='navbar'><Navbar /></div>
        <Route exact path='/' component={ Landing } />
        <Route path='/register' component={ Register } />
        <Route path='/account' component={ Account } />
        <Route path='/pair' component={ Pair } />
      </main>
    )} />
  </Switch>
)

export default App

If you navigate to /account as a result of opening a new position, you should see the following:

Click on an open pair and take a good gander at the browser.

And with that a user can close positions. Best we don't just rest on our laurels. Time to implement our chart! We'll start with the query. In graphql/queries create a new file and name it monthlyTimeSeries.js. Insert the following:

// graphql/queries/monthlyTimeSeries.js

import gql from 'graphql-tag' 

export const MONTHLYTIMESERIES = gql`
  query MonthlyTimeSeries($fc: String, $tc: String) {
    monthlyTimeSeries(fc: $fc, tc: $tc) {
      timesArray
      valuesArray
    }
  }
`

In the pages folder create a new file named Chart.js and add the below code:

// Chart.js

import React, { useState } from 'react'
import { Line } from 'react-chartjs-2'
import { useQuery } from '@apollo/react-hooks'

import { MONTHLYTIMESERIES } from '../graphql/queries/monthlyTimeSeries'

export default function Chart() {
  const [ fc, setFc ] = useState('EUR'),
        [ tc, setTc ] = useState('USD'), 
        [ fromCurrency, setFromCurrency ] = useState('EUR'), 
        [ toCurrency, setToCurrency ] = useState('USD'),
        { data, error, loading, refetch } = useQuery(MONTHLYTIMESERIES, {
          variables: { fc, tc }
        })

  if(loading) return <p>loading...</p>
  if(error) return <button onClick={() => {
    refetch({ fc: 'EUR', tc: 'USD' })
    window.location.href = '/chart'
  }}>retry</button>

  const labels = data && data.monthlyTimeSeries.timesArray,
        chartData = data && data.monthlyTimeSeries.valuesArray

  return (
    <div className='chartData'>
      <form onSubmit={e => {
        e.preventDefault()
        setFc(fromCurrency)
        setTc(toCurrency) 
      }}>
        <input 
          name='fromCurrency'
          value={fromCurrency}
          placeholder='From Currency'
          onChange={e => setFromCurrency(e.target.value.toUpperCase())}
        />
        <input 
          name='toCurrency'
          value={toCurrency}
          placeholder='To Currency'
          onChange={e => setToCurrency(e.target.value.toUpperCase())}
        />
        <button>submit</button>
      </form>
      <Line data={{
        labels,
        datasets: [
          {
            label: `${fc}/${tc} Time Series FX (Monthly)`,
            fill: true,
            lineTension: 0.1,
            backgroundColor: 'rgb(55, 131, 194)',
            borderColor: 'white',
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: 'white',
            pointBackgroundColor: '#fff',
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: 'white',
            pointHoverBorderColor: 'rgba(220,220,220,1)',
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: chartData
          }
        ]
      }} />
    </div>
  )
}

We use our monthlyTimeSeries query to fetch our chart data. We provide a couple inputs so that the user can choose which currency pair they'd like to investigate. If the user enters an incorrect pair we present them with a refresh button. The refetch function accepts arguments to its associated query. onClick we use this function to display EUR/USD again. We feed the Line component that we get curtesy of react-chartjs-2 the two arrays from our query: labels and chartData. Finally, we add some styling and return our chart.

We'll need to import Chart.js into App.js and give it a path in Navbar.js. Let's start with App.js:

// App.js

import React from 'react'
import { Route, Switch } from 'react-router-dom'

import Landing from './pages/Landing'
import Navbar from './components/navbar/Navbar'
import Register from './components/auth/Register'
import Login from './components/auth/Login'
import Account from './pages/Account'
import Pair from './pages/Pair'
import Chart from './pages/Chart'

const App = () => (
  <Switch>
    <Route path='/login' component={ Login } />
    <Route path='/' render={() => (
      <main>
        <div className='navbar'><Navbar /></div>
        <Route exact path='/' component={ Landing } />
        <Route path='/register' component={ Register } />
        <Route path='/account' component={ Account } />
        <Route path='/pair' component={ Pair } />
        <Route path='/chart' component={ Chart } />
      </main>
    )} />
  </Switch>
)

export default App

Navbar.js:

// Navbar.js

import React from 'react'
import { NavLink, Redirect } from 'react-router-dom'
import { useQuery } from '@apollo/react-hooks'

import { MEQUERY } from '../../graphql/queries/me'
import Logout from '../auth/Logout'
import './Navbar.css'

const Navbar = () => {
  const { data, loading, error } = useQuery(MEQUERY)

  if(loading) return <p>Loading....</p>
  if(error) return <Redirect to='/login' />
  if(!data) return <p>This is unfortunate</p>

  return (
    <div className='navigation'>
      <header><NavLink exact to='/'>Forex</NavLink></header>
      { !data.me ? (
        <ul>
          <li><NavLink exact to='/login'>Login</NavLink></li>
          <li><NavLink exact to='/register'>SignUp</NavLink></li>
        </ul> ) 
      : (
        <ul>
          <li><NavLink to='/chart'>Chart</NavLink></li>
          <li><NavLink to='/account'>Account</NavLink></li>
          <li><Logout /></li>
        </ul>
      )}
    </div>
  )
}

export default Navbar

Once you save your files our app will be complete and should resemble the video below:

You'll notice that the chart is fully responsive and not so bad on the old spectacles.

BEHOLD! We've created a currency exchange and hopefully learned a little something along the way. I know I did.

Reach out: Twitter | Medium | GitHub

Let's Build A Currency Exchange Part I

Marlon Decosta — Wed, 14 Aug 2019 18:09:32 +0000

I started this project with two goals:

Solidify my understanding of GraphQL.
Learn and implement Apollo Server/Client.

I decided to take a deep dive into Apollo, gain a better understanding of its use cases and figure out how to make it play nice with other technologies. In my opinion, the best way to learn a technology is to build something with said tech — then write about it.

We're going to be building a currency exchange with a GraphQL server. We'll use MongoDB/Mongoose to persist our data. We'll implement ApolloServer on the backend and ApolloClient on the front. ApolloClient will provide us with our remote data — React, our local state. Apollo provides an InMemoryCache that we'll utilize on the frontend.

We'll extract our currency data from the Alpha Vantage Finance API. If you are looking for a wider range of options, this review article also covers other stock and currency APIs for you to consider. With this data we'll allow users to buy long, or sell short currency pairs. Later, we'll use Chartjs to implement, well, a chart. 😉

Let's get to work!

We're going to need to install a few dependencies. I'll go over each one in depth as we need them, but for now let's just get them installed.

Create a new project folder and run the following command in your terminal:

  npm init -y

Now that we have a package.json file, let's get to the business of installing our dependencies.

First, let's install nodemon as a dev dependency.

  npm i -D nodemon

Now for the rest:

  npm i apollo-datasource apollo-datasource-rest apollo-server-express bcryptjs express express-session graphql isemail mongoose

Head into package.json, remove the test script and add the following:

  "scripts": {
    "start": "nodemon index.js"
  },

Create an index.js file and add the below code:

  // index.js

  const app = require('express')()

  app.get('/', (req, res) => res.send('Hello world!'))

  const PORT = 4000

  app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

Type npm start into your terminal, then head to localhost:4000. Greeting you should be no other than the ancient, solemn ritual that is, 'Hello World!' With the ritualistic niceties out of the way, let's get to Apollo.

Right now we're just running an express server. Apollo doesn't require us to install express. The reason I've decided to do so is because I'd like to integrate express-session. For this reason, we're utilizing express and apollo-server-express instead of apollo-server.

Head over to Alpha Vantage and grab your API key. It's very simple. Click on the green 'GET YOUR FREE API KEY TODAY' button and you'll be all set.

The advantages of Apollo will unveil themselves as we begin to work with it. Head to index.js and make the following adjustments:

  // index.js

  const app = require('express')()
  const { ApolloServer } = require('apollo-server-express')

  const typeDefs = require('./typeDefs')
  const resolvers = require('./resolvers') 
  const CurrencyAPI = require('./datasources/currencies')

  const server = new ApolloServer({ 
    typeDefs,
    resolvers,
    dataSources: () => ({
      currencyAPI: new CurrencyAPI() 
    })
  })

  server.applyMiddleware({ app })

  app.listen(PORT, () => {
    console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
  })

We import the ApolloServer class from apollo-server-express and store a new instance in a variable named server. We also import three local files we still have to create. We pass our GraphQL schema (or typeDefinitions) to the typeDefs property on the ApolloServer configuration Object. We do the same for our resolvers and dataSources (this will be explained in detail). Afterwards, we pass app as our lone middleware — for now.

Create a new file named typeDefs.js and add the following:

  // typeDefs.js

  const { gql } = require('apollo-server-express')

  const typeDefs = gql`
    type Query {
      currencyPairInfo(fc: String, tc: String): PairDisplay!
    }

    type PairDisplay {
      fromCurrency: String!
      fromCurrencyName: String
      toCurrency: String!
      toCurrencyName: String
      exchangeRate: String
      lastRefreshed: String
      timeZone: String
      bidPrice: String
      askPrice: String
    }
  `

  module.exports = typeDefs

Unlike a REST API, GraphQL uses only one route. You don't ping different endpoints for each task. Instead, the schema (or typeDefs) describe exactly what data you want and how you want to receive it.

When working with GraphQL there's three things you must understand: Queries, Mutations, and resolvers. Everything revolves around them. You can think of it as GraphQL queries describe how you get data, and GraphQL mutations describe how you mutate (post/put/delete) data. You describe exactly what variables are needed (if any) and what the response should look like. Resolvers are just functions that handle the execution of queries and mutations.

Declare what you want then write the function to do it.

In the query above we're making GraphQL aware that whenever we ask for currencyPairInfo, that two arguments may or may not be provided. After the colon we declare that the response should be returned in the shape described by the type that we name PairDisplay. The exclamation mark at the end declares that this response is required.

I didn't make the arguments to currencyPairInfo required because we're going to set default parameters on the request. We'll set the default parameter for fc (fromCurrency) to EUR and tc (toCurrency) to USD. If we wanted these arguments to be required, we'd simply add an exclamation mark after the type like so: String!.

Let's add our resolvers. Create a new file named resolvers.js and add the following code:

// resolvers.js

const resolvers = {
  Query: {
    currencyPairInfo: async (_, { fc, tc }, { dataSources }) => {
      try {
        const currencyPairs = await dataSources.currencyAPI.getCurrencyPair(fc, tc)
        return currencyPairs
      } catch (error) { throw err }
    }
  }
}

module.exports = resolvers

In GraphQL, resolvers have access to the context. The context is an Object shared by all resolvers. It's useful for keeping track of things such as authentication info, the current user, database connections, and data sources. The context is available as the third argument of each resolver.

A resolvers function signature:

First argument = parent.
Second argument = args.
Third argument = context.

It's considered best practice to keep your resolvers clean and concise, so we abstract the heavy lifting out to another file. This is the file we imported into index.js and still need to create. Data sources get access to the GraphQL context. This is why we don't have to import it into resolvers.js. We just destructor it from the context Object.

Create a new folder named datasources. Inside make a new file and name it currencies.js. Add the below code:

// currencies.js

const { RESTDataSource } = require('apollo-datasource-rest') 
const keys = require('../config/keys')

class CurrencyAPI extends RESTDataSource {
  constructor() {
    super() 
    this.baseURL = ''
  }

  async getCurrencyPair(fc='EUR', tc='USD') {
    try {
      const data = await this.get(`https://www.alphavantage.co/query?
function=CURRENCY_EXCHANGE_RATE&from_currency=${fc}
&to_currency=${tc}&apikey=${keys.alphaVantageAPIKey}`),
            response = data['Realtime Currency Exchange Rate'],
            fromCurrency = response['1. From_Currency Code'],
            fromCurrencyName = response['2. From_Currency Name'],
            toCurrency = response['3. To_Currency Code'],
            toCurrencyName = response['4. To_Currency Name'],
            exchangeRate = response['5. Exchange Rate'],
            lastRefreshed = response['6. Last Refreshed'],
            timeZone = response['7. Time Zone'],
            bidPrice = response['8. Bid Price'],
            askPrice = response['9. Ask Price']
      return data && response && {
          fromCurrency,
          fromCurrencyName,
          toCurrency,
          toCurrencyName,
          exchangeRate,
          lastRefreshed,
          timeZone,
          bidPrice,
          askPrice
        }
    } catch (err) { throw err }
  }
}

module.exports = CurrencyAPI

We import RESTDataSource from apollo-datasource-rest. We extend this class (create a child class) to define our data source. An Apollo data source is a class that encapsulates all of the data fetching logic, as well as caching and deduplication for a particular service.

From the docs:

The Apollo RESTDataSource also sets up an in-memory cache that caches responses from our REST resources with no additional setup. We call this partial query caching. What's great about this cache is that you can reuse existing caching logic that your REST API exposes. Apollo REST data sources also have helper methods that correspond to HTTP verbs like GET and POST.

We'll discuss this cache in more detail once we get to ApolloClient.

All this file does is fetch some data from the Alpha Vantage API. We extend the RESTDataSource class and in our contructor function we initialize our baseURL. baseURL is given to us curtesy of Apollo. A simple example of how this is useful, is if we had two methods in this class that had to hit separate endpoints of the same URL.

For instance:

  constructor() {
    super()
    this.baseURL = 'https://github.com/'
  }

  // Later in some method
  this.get('marlonanthony') // https://github.com/marlonanthony

  // In some other method
  this.get('peggyrayzis') // https://github.com/peggyrayzis

You can also set URL's dynamically. Let's take a look at an example from the docs:

  get baseURL() {
    if (this.context.env === 'development') {
      return 'https://movies-api-dev.example.com/';
    } else {
      return 'https://movies-api.example.com/';
    }
}

After our constructor function we implement the method we called in our resolver, getCurrencyPair. This method is responsible for fetching our realtime currency exchange rate data. We utilize the URL given to us by Alpha Vantage, add our arguments and our API key.

The Alpha Vantage API is free, which means convienent. That said, their naming conventions are a bit goofy and require us to use bracket notation, hence the verbosity.

By default Apollo Server supports GraphQL Playground. The Playground is an interactive, in-browser GraphQL IDE for exploring your schema and testing your queries/mutations. Think Postman but for GraphQL.

Start your server with npm start. Then head to localhost:4000/graphql and take a look.

On the left side of the play button we declare that we want to query some data. We then explain which query and provide the necessary arguments. If you press control + spacebar (on Mac), you should get autocomplete suggestions for your schema. Afterwards, we declare what data we want returned. Once you press the play button you'll see the response on the right half of the playground.

Inside of our getCurrencyPair method, we define everything that is possible to return from this query. The difference between GraphQL and REST is that if we wished, we could limit our request to any slice of this data we like.

Sweet! We're fetching realtime currency exchange rates from the Alpha Vantage API! That said, we're not done here. I stated earlier that we'd be implementing a chart to display a monthly time series of currency pair data. To do this we need to add another method to our CurrencyAPI class.

  // currencies.js

  async getMonthlyTimeSeries(fc='EUR', tc='USD') {
    try {
      const data = await this.get(`https://www.alphavantage.co/query?
function=FX_MONTHLY&from_symbol=${fc}&to_symbol=${tc}&apikey=${keys.alphaVantageAPIKey}`),
            timeSeries = data && data['Time Series FX (Monthly)'],
            timesArray = timeSeries && Object.keys(timeSeries).reverse(),
            valuesArray = timeSeries && Object.values(timeSeries).map(val => val['4. close']).reverse()

      return { timesArray, valuesArray }

    } catch (error) { throw error }
  }

Here we utilize a different Alpha Vantage endpoint. We provide the arguments and API key as we did before. We return an object containing two arrays, the timesArray (x-axis) and the valuesArray (y-axis). This is all we need for our chart.

We need to make a resolver to call this method and add a query to our typeDefs. Head into typeDefs.js and adjust the query type to the following:

// typeDefs.js 

  type Query {
    currencyPairInfo(fc: String, tc: String): PairDisplay!
    monthlyTimeSeries(fc: String, tc: String): TimeSeries!
  }

Here we expect to receive a fromCurrency (fc) and toCurrency (tc) argument. Again, we don't make the arguments required because we just set default parameters on the request. The reason I chose to do this is so that when a person navigates to the chart, the page will load with data instead of being blank until the user enters a currency pair.

Our monthlyTimeSeries query requires us to return data of the type TimeSeries. Let's define exactly what this is. Add the following type to typeDefs.js:

// typeDefs.js 

  type TimeSeries {
    timesArray: [String!]!
    valuesArray: [String!]!
  }

Here we declare that two arrays must be returned and that those arrays must be filled with Strings. Both the string and the arrays are required (!).

Lastly, let's add our resolver. Adjust resolvers.js such that it resembles the following:

// resolvers.js

  const resolvers = {
    Query: {
      currencyPairInfo: async (_, { fc, tc }, { dataSources }) => {
        try {
          const currencyPairs = await dataSources.currencyAPI.getCurrencyPair(fc, tc)
          return currencyPairs
        } catch (error) { throw err }
      },
      monthlyTimeSeries: async (_, { fc, tc }, { dataSources }) => {
        try {
          const timeSeries = await dataSources.currencyAPI.getMonthlyTimeSeries(fc, tc)
          return timeSeries
        } catch (error) { throw error }
      }
    }
  }

module.exports = resolvers

Open up GraphQL Playground and query monthlyTimeSeries.

The GraphQL pattern should be becoming clear by now.

Create a query/mutation.
Create a resolver to handle said query/mutation.

And like that we're done with the Alpha Vantage API!

We're slowly getting familiar with GraphQL and Apollo. Let's get a little more comfortable and tackle authentication. Handling authentication/authorization is a well-covered topic. We'll simply focus on integration with Apollo.

The first thing we should do is create a database. We'll be using MongoDB/Mongoose. Head to MongoDB Atlas and sign up/sign in. Creating a remote database with Atlas is fairly straightforward. Once you login, click on the 'New Project' button. From here just choose your cloud provider of choice, select your region, and name your cluster. Once your cluster is built, click the connect button. Whitelist your IP address and create an admin user for the project. Choose the 'Connect Your Application' option and copy the connection string provided. Finally, click on the 'collections' button. This is where we'll see our data.

Replace <password> in your connection string with your user password but store it in a variable and place it in either an env file or a config folder. As long as you don't push it to GitHub.

Let's connect to our database and define our user schema. Back in index.js import mongoose, import your MongoDB password, then adjust index.js to the following:

// index.js

const app = require('express')()
const { ApolloServer } = require('apollo-server-express')
const mongoose = require('mongoose')

const typeDefs = require('./typeDefs')
const resolvers = require('./resolvers') 
const CurrencyAPI = require('./datasources/currencies')
const { mongoPassword } = require('./config/keys')

const server = new ApolloServer({ 
  typeDefs,
  resolvers,
  dataSources: () => ({
    currencyAPI: new CurrencyAPI() 
  })
})

server.applyMiddleware({ app })

mongoose
.connect(`mongodb+srv://marlon:${mongoPassword}@cluster0-o028g.mongodb.net/forex?retryWrites=true&w=majority`, { useNewUrlParser: true })
.then(() => app.listen(4000, () => {
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
})).catch(err => console.log(err))

You'll notice that at the end of the URL we added a bit of configuration to rid ourselves of that pesky MongoDB/Mongoose warning. Once you save index.js we'll be connected to our database.

Now for the schema. Create a folder named models. Inside of models create a new file named User.js and insert the following:

// User.js

const mongoose = require('mongoose') 
const Schema = mongoose.Schema

const User = new Schema({
  email: {
    type: String,
    required: true 
  },
  password: {
    type: String,
    required: true 
  },
  name: {
    type: String,
    required: true 
  },
  bankroll: {
    type: Number,
    default: 1000000,
    required: true
  },
  pairs: [
    {
      type: Schema.Types.ObjectId,
      ref: 'Pair'
    }
  ]
}, {
  timestamps: true
})

module.exports = mongoose.model('User', User)

We import the Schema class from mongoose and create a new instance with which we name User. Afterwards, we define our schema. Each user will have an ID gifted to them by MongoDB so we need not define it. Users will have to provide an email, password, and name. We start each user off with a million bucks — because we can. Each user will want to track which currency pair positions they've opened. We assign a pairs property that will provide us an array of IDs for each pair a user opens. Finally, by adding timestamps: true to our schema, Mongoose provides us with two properties: createdAt and updatedAt.

Create a new file in the models folder and name it Pair.js. Inside write the following code:

// Pair.js

const mongoose = require('mongoose') 
const Schema = mongoose.Schema

const Pair = new Schema({
  user: {
    type: Schema.Types.ObjectId,
    ref: 'User'
  },
  pair: {
    type: String,
    required: true 
  },
  lotSize: {
    type: Number,
    required: true 
  },
  position: {
    type: String,
    required: true 
  },
  openedAt: {
    type: Number,
    required: true 
  },
  closedAt: {
    type: Number,
  },
  pipDif: {
    type: Number,
  },
  profitLoss: {
    type: Number
  },
  open: {
    type: Boolean,
    required: true,
    default: false
  }
}, {
  timestamps: true
})

module.exports = mongoose.model('Pair', Pair)

We store the users ID in a property called user. The pair property will look something like this: EUR/USD. lotSize is the amount of money the user placed on the position. position is either 'long' or 'short.' pipDif will be explained in detail later but for now just know that it's how we'll calculate the relative difference in value between a currency pair, and therefore the profit/loss of a position. open informs us whether or not the position has been closed.

Open up typeDefs.js and add two types: User and Pair.

// typeDefs.js

  type User {
    id: ID!
    email: String!
    name: String!
    bankroll: Float!
    pairs: [Pair]
    createdAt: String!
    updatedAt: String!
  }

  type Pair {
    id: ID!
    user: ID!
    pair: String!
    lotSize: Int!
    position: String!
    openedAt: Float!
    closedAt: Float
    pipDif: Float
    profitLoss: Float
    open: Boolean!
    createdAt: String!
    updatedAt: String!
  }

For the most part, if something is required in your model schema, then it should probably be required in your GraphQL schema.

Time to add our first mutation. Inside typeDefs.js add the Mutation type.

// typeDefs.js

  type Mutation {
    register(email: String!, password: String!, name: String!): Boolean!
  }

The user must submit an email, password, and their name. We return true or false depending on the success of a users registration.

We've handled the typeDefs, now for the resolver. We'll need to add a Mutation property to our resolvers Object.

// resolvers.js

const resolvers = {
  Query: {
    currencyPairInfo: async (_, { fc, tc }, { dataSources }) => {
      try {
        const currencyPairs = await dataSources.currencyAPI.getCurrencyPair(fc, tc)
        return currencyPairs
      } catch (error) { throw err }
    },
    monthlyTimeSeries: async (_, { fc, tc }, { dataSources }) => {
      try {
        const timeSeries = await dataSources.currencyAPI.getMonthlyTimeSeries(fc, tc)
        return timeSeries
      } catch (error) { throw error }
    }
  },

  Mutation: {
    register: async (_, { email, password, name }, { dataSources }) => {
      try {
        const newUser = await dataSources.userAPI.createNewUser({ email, password, name })
        return newUser
      } catch (error) { throw error }
    },
  }
}

module.exports = resolvers

Again we keep our resolvers clean and abstract the heavy lifting to another file. But what file? RESTDataSource is responsible for fetching data from a REST API. This is not what we're doing here. Apollo allows us to create custom data sources with the generic apollo-datasource package. This is what we'll be using.

Create a new file in the datasources folder and name it user.js.

// user.js

const { DataSource } = require('apollo-datasource')
const { UserInputError } = require('apollo-server-express')
const isEmail = require('isemail')
const bcrypt = require('bcryptjs')

const User = require('../models/User') 

class UserAPI extends DataSource {

  // gain access to the GraphQL context
  initialize(config) {
    this.context = config.context
  }

  async createNewUser({ email, password, name }) {
    try {
      if(!isEmail.validate(email)) { throw new UserInputError('Invalid Email!') }
      const existingUser = await User.findOne({ email })
      if(existingUser) { throw new UserInputError('User already exist!') }
      const hashedPassword = await bcrypt.hash(password, 12)
      const user = await new User({
        name,
        email,
        password: hashedPassword
      })
      await user.save()
      return true 
    } catch (error) { throw error }
  }
}

module.exports = UserAPI

First, we import Apollo's DataSource class. We then create a subclass by extending DataSource and name it UserAPI. Apollo grants us access to the context from inside this class by adding the initialize function. This is a function that gets called by ApolloServer when being setup. This function gets called with the datasource config including things like caches and context. This allows us to utilize this.context, granting us access to the request context, so we can know about the user making requests.

We also import UserInputError from apollo-server-express. This allows us to differentiate between error types. Apollo Client distinguishes two kinds of errors: graphQLErrors and networkError. Let's take a look at a blog post written by the Apollo team last year.

What about these graphQLErrors thrown in our resolvers? Again, let's take a look at this blog post.

We import isemail to ensure a valid email was provided. We also import bcrypt to hash user passwords before saving them to the database. Lastly, we import our User schema.

Head to index.js and import our newly created data source. Then add a new instance of our UserAPI class to ApolloServer's configuration Object:

// index.js

const UserAPI = require('./datasources/user')

const server = new ApolloServer({ 
  typeDefs,
  resolvers,
  dataSources: () => ({
    currencyAPI: new CurrencyAPI(),
    userAPI: new UserAPI()
  })
})

Save your files and take a look at the GraphQL Playground.

If you try to register the same user twice, you should get the UserInputError we defined earlier ("User already exist!"). You should also be able to see our newly created user in the database. Now that we can register users, let's get them logged in.

We'll be using express-session to keep track of our user. The idea is that once a user successfully logs in, we'll attach the users id to the session on the request Object. We'll gain access to the request Object curtesy of the context Object in our resolvers, or via this.context in our UserAPI Class — once we place it on the context.

Head to index.js and make the following adjustments:

// index.js

const app = require('express')()
const { ApolloServer } = require('apollo-server-express')
const mongoose = require('mongoose')
// Import express-session
const session = require('express-session')

const typeDefs = require('./typeDefs')
const resolvers = require('./resolvers') 
const CurrencyAPI = require('./datasources/currencies')
const UserAPI = require('./datasources/user')
// import your session secret
const { mongoPassword, secret } = require('./config/keys') 

const server = new ApolloServer({ 
  typeDefs,
  resolvers,
  dataSources: () => ({
    currencyAPI: new CurrencyAPI(),
    userAPI: new UserAPI()
  }),
  // add req Object to context
  context: ({ req }) => ({ req })
})

// add express-session to middleware
app.use(session({
  secret,
  resave: false,
  saveUninitialized: false
}))

// add cors to middleware
server.applyMiddleware({ 
  app, 
  cors: {
      credentials: true,
      origin: 'http://localhost:3000'
  }
})

mongoose
.connect(`mongodb+srv://marlon:${mongoPassword}@cluster0-o028g.mongodb.net/forex?retryWrites=true&w=majority`, { useNewUrlParser: true })
.then(() => app.listen(4000, () => {
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
})).catch(err => console.log(err))

Import express-session then create and import your session secret. Any String will do. Then add the request Object to the context and pass our express-session and cors middleware.

Let's add login to our typeDefs.

// typeDefs.js

type Mutation {
  register(email: String!, password: String!, name: String!): Boolean!
  login(email: String!, password: String!): User
}

The login resolver:

// resolvers.js 

Mutation: {
  register: async (_, { email, password, name }, { dataSources }) => {
    try {
      const newUser = await dataSources.userAPI.createNewUser({ email, password, name })
      return newUser
    } catch (error) { throw error }
  },
  login: async (_, { email, password }, { dataSources }) => {
    try {
      const user = await dataSources.userAPI.loginUser({ email, password })
      return user 
    } catch (error) { throw error }
  },
}

Head to datasources/user.js and add a method named loginUser to the UserAPI class.

// datasources/user.js

async loginUser({ email, password }) {
  try {
    if (!isEmail.validate(email)) { throw new UserInputError('Invalid Email') }
    const user = await User.findOne({ email }) 
    if(!user) { throw new UserInputError('Email or password is incorrect!') }
    const isEqual = await bcrypt.compare(password, user.password)
    if(!isEqual) { throw new UserInputError('Email or password is incorrect!') }
    this.context.req.session.userId = user.id 
    return user 
  } catch (error) { throw error }
}

We validate the email with isemail. Next, we compare the given password with the hashed password from the database. If all goes well, we place a userId property on req.session. This is how we'll keep track of our user. I'm returning the entire user Object here for the sake of simplicity. That said, in a production app you'd never want to return the users password.

Head to the GraphQL Playground and run the login mutation.

The way we'll keep track of the user on the frontend is with a me query. This me query will tell us which user is attempting to perform an action, hence allowing us to decide whether this user has authorization to perform said action.

Let's get to it!

First, add the me query to typeDefs.js.

// typeDefs.js

type Query {
  currencyPairInfo(fc: String, tc: String): PairDisplay!
  monthlyTimeSeries(fc: String, tc: String): TimeSeries!
  me: User
}

Add me query to the resolvers Query Object.

// resolvers.js 

me: async (_, __, { dataSources }) => {
  try {
    const user = await dataSources.userAPI.getMe()
    return user
  } catch (error) { throw error }
},

Next, we need to add the getMe method to our data source. Head to datasources/user.js and add the following:

// datasources/user.js

  async getMe() {
    try {
      if(!this.context.req.session.userId) return null 
      const user = await User.findById(this.context.req.session.userId) 
      return user 
    } catch (error) { throw error }
  }

Now head back to the GraphQL Playground. Click on the settings gear icon at the top right of the playground and adjust "request.credentials" to: "request.credentials":"include". Log in then execute the me query and you should get back the logged in user.

Now log in with a different user and when you perform the me query, it'll provide the new users info. This is because on every request a new context is being built. Therefore, req.session.userId will always belong to the user that made the request.

Sweet! This is a good time to create a logout mutation. Let's get to it! Head to typeDefs.js and add the logout mutation.

// typeDefs.js

type Mutation {
  register(email: String!, password: String!, name: String!): Boolean!
  login(email: String!, password: String!): User!
  logout: Boolean
}

Add logout to the Mutation Object in resolvers.js.

// resolvers.js

Mutation: {
  register: async (_, { email, password, name }, { dataSources }) => {
    try {
      const newUser = await dataSources.userAPI.createNewUser({ email, password, name })
      return newUser
    } catch (error) { throw error }
  },
  login: async (_, { email, password }, { dataSources }) => {
    try {
      const user = await dataSources.userAPI.loginUser({ email, password })
      return user 
    } catch (error) { throw error }
  },
  logout: async (_, __, { req }) => {
    try { req.session.destroy(() => false) } 
    catch (error) { throw error }
  },
}

When a user clicks logout we destroy the session and return false. When you perform the logout Mutation you should get back null.

Behold! A user can log out!

Being this is a currency exchange, it'd probably be best if we allow users to exchange currency. 🤔 Open up typeDefs.js and add the openPosition mutation.

// typeDefs.js

type Mutation {
  register(email: String!, password: String!, name: String!): Boolean!
  login(email: String!, password: String!): User!
  logout: Boolean
  openPosition(pair: String!, lotSize: Int, openedAt: Float!, position: String!): PairUpdateResponse!
}

Now add PairUpdateResponse to typeDefs.js:

// typeDefs.js

type PairUpdateResponse {
  success: Boolean!
  message: String!
  pair: Pair!
}

When a user attempts to open a positon (buy/sell a currency pair), they'll get back a success response (true/false), a message describing the action taken, and information about the pair.

Add the openPosition mutation to resolvers.js.

// resolvers.js

openPosition: async (_, { pair, lotSize, openedAt, position }, { dataSources }) => {
  try {
    const open = await dataSources.userAPI.newPosition({ 
      pair, 
      lotSize, 
      openedAt, 
      position 
    })
    return open 
  } catch (error) { throw error }
},

openPosition takes a few arguments. pair will look something like: 'EUR/USD'. lotSize is the size of the position you're taking (how much money you're placing on the position). openedAt is the price that you bought/sold at. position will be either 'long' or 'short' depending on if the user wants to buy long (bet the price will go up) or sell short (bet the price will go down).

Add the newPosition method to datasources/user.js, but first import AuthenticationError and ForbiddenError from apollo-server-express. We'll also need to import our Pair schema.

// datasources/user.js

const { 
  UserInputError, 
  AuthenticationError, 
  ForbiddenError 
} = require('apollo-server-express')

const Pair = require('../models/Pair')

async newPosition({ pair, lotSize, openedAt, position }) {
  try {
    const user = await User.findById(this.context.req.session.userId)
    if(!user) throw new AuthenticationError('Invalid Crendentials!')
    if(user.bankroll < lotSize) throw new ForbiddenError(`Insufficient funds!`)

    const newPair = new Pair({
      pair,
      lotSize,
      openedAt,
      position,
      open: true,
      user: this.context.req.session.userId
    })
    const pairResult = await newPair.save()
    user.pairs.unshift(pairResult)
    user.bankroll -= lotSize
    await user.save()
    const message = `Congrats ${user.name}! You've opened a ${position} position on ${pair} at ${openedAt}!`
    const success = true
    return { success, message, pair: pairResult }
  } catch (error) { throw error }
}

First we check if the user has enough money to complete the transaction. If they do we create the pair and add it to the pairs array. We subtract the position size from the users bankroll, and return a response in the shape of PairUpdateResponse.

Open up GraphQL Playground, login and run the openPosition mutation.

Now that our users can open a position, it might be a good idea to provide a way of closing said position. Let's add a closePosition mutation to typeDefs.js.

// typeDefs.js

type Mutation {
  register(email: String!, password: String!, name: String!): Boolean!
  login(email: String!, password: String!): User!
  logout: Boolean
  openPosition(pair: String!, lotSize: Int, openedAt: Float!, position: String!): PairUpdateResponse!
  closePosition(id: ID!, closedAt: Float!): PairUpdateResponse!
}

The closePosition mutation takes as arguments the pair id and the exit price (closedAt). It then returns a response in the form of PairUpdateResponse.

Let's handle the resolver.

// resolvers.js

closePosition: async(_, { id, closedAt }, { dataSources }) => {
  try {
    const close = await dataSources.userAPI.exitPosition({ id, closedAt })
    return close 
  } catch (error) { throw error }
},

Back to datasource/user.js to implement the exitPosition method.

// datasources/user.js

async exitPosition({ id, closedAt }) {
  try {
    const user = await User.findById(this.context.req.session.userId) 
    if(!user) throw new AuthenticationError('Invalid credentials!')

    const pair = await Pair.findById(id) 
    if(!pair) throw new AuthenticationError('Invalid credentials!')
    if(!pair.open) throw new ForbiddenError('Transaction already complete!')
    let pipDifFloat
    pair.position === 'long' 
      ? pipDifFloat = (closedAt - pair.openedAt).toFixed(4) 
      : pipDifFloat = (pair.openedAt - closedAt).toFixed(4)   
    pair.pipDif = pipDifFloat
    pair.closedAt = closedAt
    pair.profitLoss = pipDifFloat * pair.lotSize
    pair.open = false 
    const savedPair = await pair.save()

    user.bankroll += (pair.lotSize + savedPair.profitLoss) 
    await user.save() 

    const success = true 
    const message = `${ savedPair.profitLoss > 0 
      ? 'Congrats!' 
      : ''
      } ${user.name} you've closed your ${savedPair.position} position on ${savedPair.pair} at ${closedAt}${ savedPair.profitLoss > 0 
      ? '! For a profit of '+Math.round(savedPair.profitLoss)+'!' 
      : '. For a loss of '+Math.round(savedPair.profitLoss)+'.'}`
    return { success, message, pair: savedPair }
  }
  catch (error) { throw error }
}

Once we find our pair we create a variable named pipDifFloat. If the position is long, we subtract the openedAt price from the closedAt price. If the position is short, we subtract the closedAt price from the openedAt price. We store the result in pipDifFloat then set the pairs pipDif property to pipDifFloat.

Next, we set the closedAt price and calculate the profitLoss by multiplying the pipDifFloat by the lotSize. Afterwards, we set the open property to false and save our pair. Once we save the pair we adjust the users bankroll accordingly. finally, we return PairUpdateResponse and give the user the good/bad news.

Take a look at the GraphQL Playground:

We're making some serious progress. Let's make some more!

We have two related queries left so let's tackle them together. Inside typeDefs.js adjust the Query type to the following:

// typeDefs.js

type Query {
  currencyPairInfo(fc: String, tc: String): PairDisplay!
  monthlyTimeSeries(fc: String, tc: String): TimeSeries!
  me: User
  findPair(id: ID!): Pair!
  getPairs: [Pair!]
}

One query to get a pair by id. Another query to retreive all of a users pairs. Let's take care of the resolvers. Adjust the Query Object such that it resembles the below code:

// resolvers.js

Query: {
  currencyPairInfo: async (_, { fc, tc }, { dataSources }) => {
    try {
      const currencyPairs = await dataSources.currencyAPI.getCurrencyPair(fc, tc)
      return currencyPairs
    } catch (error) { throw err }
  },
  monthlyTimeSeries: async (_, { fc, tc }, { dataSources }) => {
    try {
      const timeSeries = await dataSources.currencyAPI.getMonthlyTimeSeries(fc, tc)
      return timeSeries
    } catch (error) { throw error }
  },
  me: async (_, __, { dataSources }) => {
    try {
      const user = await dataSources.userAPI.getMe()
      return user
    } catch (error) { throw error }
  },
  findPair: async (_, { id }, { dataSources }) => {
    try {
      const foundPair = await dataSources.userAPI.getPair({ id })
      return foundPair
    } catch (error) { throw error }
  },
  getPairs: async (_, __, { dataSources }) => {
    try {
      const foundPairs = await dataSources.userAPI.findPairs()
      return [...foundPairs]
    } catch (error) { throw error }
  },
},

On to datasources/user.js to define getPair and findPairs.

// datasources/user.js

async getPair({ id }) {
  try {
    const pair = await Pair.findById(id)
    if(!pair || pair.user.toString() !== this.context.req.session.userId) { 
      throw new AuthenticationError('Invalid credentials!') 
    } 
    return pair
  } catch (error) { throw error }
}

async findPairs() {
  try {
    const pairs = await Pair
      .find({ user: this.context.req.session.userId })
      .sort({ updatedAt: -1 })
    if(!pairs.length) throw new UserInputError('Nothing to show!')
    return [...pairs] 
  } catch (error) { throw error }
}

You should see something similar in the GraphQL Playground:

One last mutation and we're done with the backend! Our final specimen — addFunds. Users will want to add money to their account. Far be it from us to leave them wanting.

We'll start in typeDefs.js. Create the addFunds mutation and define its response type — AddFundsResponse.

// typeDefs.js

type Mutation {
  register(email: String!, password: String!, name: String!): Boolean!
  login(email: String!, password: String!): User!
  logout: Boolean
  openPosition(pair: String!, lotSize: Int, openedAt: Float!, position: String!): PairUpdateResponse!
  closePosition(id: ID!, closedAt: Float!): PairUpdateResponse!
  addFunds(amount: Int!): AddFundsResponse!
}

  type AddFundsResponse {
    success: Boolean!
    message: String!
    user: User!
  }

addFunds takes amount as a lone argument because we already know about the user via the context. Let's tackle our last resolver. Once we implement addFunds, our Mutation Object should resemble the following:

// resolvers.js

Mutation: {
  register: async (_, { email, password, name }, { dataSources }) => {
    try {
      const newUser = await dataSources.userAPI.createNewUser({ email, password, name })
      return newUser
    } catch (error) { throw error }
  },
  login: async (_, { email, password }, { dataSources }) => {
    try {
      const user = await dataSources.userAPI.loginUser({ email, password })
      return user 
    } catch (error) { throw error }
  },
  logout: async (_, __, { req }) => {
    try { req.session.destroy(() => false) }
    catch (error) { throw error }
  },
  openPosition: async (_, { pair, lotSize, openedAt, position }, { dataSources }) => {
    try {
      const open = await dataSources.userAPI.newPosition({ pair, lotSize, openedAt, position })
      return open 
    } catch (error) { throw error }
  },
  closePosition: async(_, { id, closedAt }, { dataSources }) => {
    try {
      const close = await dataSources.userAPI.exitPosition({ id, closedAt })
      return close 
    } catch (error) { throw error }
  },
  addFunds: async (_, { amount }, { dataSources }) => {
    try {
      const weeee = await dataSources.userAPI.additionalFunds({ amount })
      return weeee
    } catch (error) { throw error }
  }
}

On to datasources/user.js:

// datasources/user.js

async additionalFunds({ amount }) {
  try {
    const user = await User.findById(this.context.req.session.userId)
    if(!user) throw new AuthenticationError('Invalid credentials!')
    user.bankroll += amount 
    const savedUser = await user.save()
    const success = true
    const message = `Congrats ${user.name} you've added ${amount} to your bankroll!`
    return { bankroll: savedUser.bankroll, success, message } 
  } catch (error) { throw error }
}

Your GraphQL Playground should look something like this:

Behold! We're done with the backend! The frontend awaits!

The code for this project is on my GitHub.

Reach out: Twitter | Medium | GitHub