DEV Community: Eder

Create and Deploy your first GraphQL API with Apollo Server 4, TypeGraphQL and Render

Eder — Thu, 08 Jun 2023 02:05:56 +0000

TL;DR
Repo:
https://github.com/emunhoz/graphql-api-with-apollo-server-railway

Client side (React + Vite) consuming our API demo:
https://codesandbox.io/p/sandbox/xenodochial-rain-6pt9ld

Update (13/10/2023)

Playground in production:
https://graphql-apollo-api-3ybl.onrender.com/

Intro

In this step-by-step guide, we will learn how to create a GraphQL API from scratch using Apollo Server 4, type-graphql, and Railway.

We will explore the necessary steps to set up the development environment, install the relevant dependencies, define resolvers, and finally deploy the API using Railway.

Initial Configuration

Create a new folder:

mkdir graphql-api-with-apollo-server-railway

Create a package.json file:

cd graphql-api-with-apollo-server-railway && npm init -y

Add typescript:

npm install typescript -D

Generate a tsconfig.json file:

npx tsc --init

We are going to use tsx to run local scripts.

npm install tsx -D

tsx is a TypeScript runtime that allows you to run TypeScript files directly without the need for additional build steps during development.

We are going to use tsup to build the api.

npm install tsup -D

tsup is a zero-config TypeScript bundler that simplifies the process of building and bundling TypeScript code for deployment.

Add new scripts to package.json file:

  // ...
  "scripts": {
    "dev": "tsx src/index.ts",
    "dev:watch": "tsx watch src/index.ts",
    "build": "tsup src",
    "start": "npm run build && node dist/index.js" // `start` command is necessary in order to use Railway
  },
  // ...

These scripts allow you to run the development server, watch for file changes, build the API, and start the production server.

Create an index.ts file inside src

// src/index.ts

interface LogProps {
  message: string
}

function log({ message }: LogProps): string {
  console.log(message)
  return message
}

log({ message: 'Hello' })

This is a simple example code that logs a message to the console. It serves as a placeholder to demonstrate the build process.

if you run npm run build you will see the dist folder:

// dist/index.js

"use strict";

function log({ message }) {
  console.log(message);
  return message;
}
log({ message: "Hello" });

The npm run build command transpiles the TypeScript code to JavaScript and outputs the compiled code in the dist folder.

Here we finished the initial config!

Setting up `type-graphql`

The type-graphql library allows us to use the "code first" approach instead of the traditional "schema first" approach in GraphQL development. With the "code first" approach, we define our functions and classes first, and then the schema is automatically generated based on those definitions.

This approach offers a more intuitive and convenient way to build GraphQL APIs, as it eliminates the need to write the schema manually and keeps it in sync with the code.

npm i graphql class-validator type-graphql

These are the necessary dependencies for setting up Apollo Server with type-graphql. graphql is the core GraphQL library, class-validator allows for input validation, and type-graphql provides decorators and utilities for building GraphQL schemas and resolvers with TypeScript.

npm i reflect-metadata

reflect-metadata is a package that enables reflection and metadata introspection for TypeScript, which is required by type-graphql.

Update the tsconfig.json file by adding lib, emitDecoratorMetadata, strictPropertyInitialization and experimentalDecorators:

{
  "compilerOptions": {
    "lib": ["es2018", "esnext.asynciterable"],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strictPropertyInitialization": false,
    // ...
  }
}

These configuration options enable the necessary features and support for decorators and metadata used by type-graphql.

If you need, check out the documentation for more: https://typegraphql.com/docs/installation.html

Adding `@apollo/server`

Apollo Server is a GraphQL server development framework that makes it easy to create complete GraphQL servers.

Install @apollo/server:

npm install @apollo/server

Create a new file src/main/graphql/apollo/setup.ts

// src/main/graphql/apollo/setup.ts

import { ApolloServer } from '@apollo/server'
import { buildSchema } from 'type-graphql'
import { startStandaloneServer } from '@apollo/server/standalone'
import { HelloWorldResolver } from '../resolvers/hello-world'

export async function setupApolloServer() {
  const schema = await buildSchema({
    resolvers: [HelloWorldResolver],
  })

  const server = new ApolloServer({ schema })

  const { url } = await startStandaloneServer(server, {
    listen: { port: Number(process.env.PORT) || 4000 },
  })

  console.log(`🚀 Server ready at ${url}`)
}

Then, import the setupApolloServer function into the index.ts file:

// src/index.ts

import 'reflect-metadata'
import { setupApolloServer } from './main/graphql/apollo/setup'

async function main() {
  await setupApolloServer()
}

main()

Let's create our first resolver

Create a new file src/main/graphql/resolvers/hello-world.ts.
We will convert our log() function from index.ts into a resolver.

// src/main/graphql/resolvers/hello-world.ts

import { Arg, Query, Resolver } from 'type-graphql'

@Resolver()
export class HelloWorldResolver {
  @Query(() => String)
  async log(@Arg('message', (type) => String) message: string) {
    return `Hey there! This is the message: ${message}`
  }
}

Now we are good to go! Run npm run dev to open the Apollo Server Playground:

Add the variable message:

{
  "message": "My message here!"
}

Then run the Query. You should receive the following response:

{
  "data": {
    "log": "Hey there! This is the message: My message here!"
  }
}

Deploying with Railway

1 - Go to https://railway.app, log in or create an account, and import your repository via Github account.

2 - After importing the project, Railway will start the deployment process automatically.

3 - To generate a public domain, click on your project name, go to "Settings", "Domain", and click on "Generate domain".

Here is an example of the generated domain: https://graphql-railway-api-production.up.railway.app/

Please note that the query documentation is only available in the local environment. Remember to avoid exposing it in production mode. However, if you want generate the query doc in production, you can try setting up GraphQL Code Generator for documentation generation.

Update (13/10/2023)

Deploying using Render

Deploying using Render is easier as deploying with Railway. First, you need to specify your node version:

https://render.com/docs/node-version

Then, connect to Render with your Github account.

In the Build & Deploy follow the commands:

In the build command use: npm install.
Start Command use: npm run start.

Demo: https://graphql-apollo-api-3ybl.onrender.com/

Deploy! Have fun!

Wrapping up

We now have a ready-to-go production endpoint: https://graphql-railway-api-production.up.railway.app/

In this case, to consume it on the client side, we can configure @apollo/client.

I created a simple application using Vite (React) and @apollo/client using our production URL API.

Check out this link: https://codesandbox.io/p/sandbox/xenodochial-rain-6pt9ld

Hope you enjoyed it!

Convert a Roman numeral into a number with TDD and javascript

Eder — Fri, 03 Jun 2022 04:08:03 +0000

About the challenge

Convert a Roman numeral into a number is a classic coding challenge! We are going to solve this challenge using TDD.

Write a function to convert from Roman Numerals to normal numbers.

First test scenario

Let's get start creating a simple test thats return true:

describe('[Function]: romanNumeralGenerator', () => {
  test('return true', () => {
    expect(romanNumeralGenerator()).toBe(true)
  })
})

Then, let's create the function romanNumeralGenerator():

export function romanNumeralGenerator() {
  return true
}

Result:

 PASS  ./index.test.js
  [Function]: romanNumeralGenerator
    ✓ return true (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total

Ok! Nothing new so far...

Second test scenario

Let's do the first valid test. I want receive a valid integer number if I pass only one roman numeral as argument:

test('convert roman number into a number', () => {
  expect(romanNumeralGenerator('X')).toBe(10)
})

The test failed

Expected: 10
Received: true

      3 | describe('[Function]: romanNumeralGenerator', () => {
      4 |   test('convert one roman number into a number', () => {
    > 5 |     expect(romanNumeralGenerator('X')).toBe(10)
        |                                        ^
      6 |   })

Time to do the first refactor in our function. Let's create a const with all the roman numerals and assign their respective values to each number.

const romanNumbers = {
  I: 1,
  V: 5,
  X: 10,
  L: 50,
  C: 100,
  D: 500,
  M: 1000
}

Now the return of our function will receive the const romanNumbers and let's go through the object looking for the value of the argument romanNumbers[number]

export function romanNumeralGenerator(number) {
  return romanNumbers[number]
}

console.log(romanNumeralGenerator('X')) // 10

Result:

PASS  ./index.test.js
  [Function]: romanNumeralGenerator
    ✓ convert one roman number into a number (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total

Third test case

What about more than one roman numeral?

test('convert more than one roman number into a number', () => {
  expect(romanNumeralGenerator('XVI')).toBe(16)
})

Result:

Expected: 16
Received: undefined

       7 |
       8 |   test('convert more than one roman number into a number', () => {
    >  9 |     expect(romanNumeralGenerator('XVI')).toBe(16)
         |                                          ^
      10 |   })

Let's make our function return values when receive more than one digit.
First we use spread operator to create an array with all values and then we use map function to convert each roman value in integer. Then we calculate all converted values. We'll use reduce for it.

export function romanNumeralGenerator(number) {
  const convertRomanNumbersToIntegers = [...number].map(romanValue => romanNumbers[romanValue])
  const calculateConvertedRomanValues = convertRomanNumbersToIntegers.reduce((accumulator, currentValue) => accumulator + currentValue, 0)

  return calculateConvertedRomanValues
}

Result:

PASS  ./index.test.js
  [Function]: romanNumeralGenerator
    ✓ convert one roman number into a number (1 ms)
    ✓ convert more than one roman number into a number 😊😊😊

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total

Fourth test scenario

The next step is about how to subtract values in case we have something like this: IV, IX, XIV

test('subtract the value if the next is greater than the current value', () => {
  expect(romanNumeralGenerator('IV')).toBe(4)
  expect(romanNumeralGenerator('IX')).toBe(9)
  expect(romanNumeralGenerator('XIV')).toBe(14)
  expect(romanNumeralGenerator('XXIX')).toBe(29)
})

Result:

    ✕ subtract the value if the next is greater than the current value (1 ms)

  ● [Function]: romanNumeralGenerator › subtract the value if the next is greater than the current value

    expect(received).toBe(expected) // Object.is equality

    Expected: 4
    Received: 6 😓😓😓😓

      11 |
      12 |   test('subtract the value if the next is greater than the current value', () => {
    > 13 |     expect(romanNumeralGenerator('IV')).toBe(4)
         |                                         ^
      14 |     expect(romanNumeralGenerator('IX')).toBe(9)

We need to check if the next value (inside calculateConvertedRomanValues) is greater than the current value, if so, we subtract the current value from the acc. E.g: the next value is 5 and the current one is 1, so, 5 - 1 = 4.

In a reduce function we have 4 default arguments reduce((accumulator, currentValue, index, array). First, we will grab the next value, then, the condition to check if next value is greater than the current value and subtract:

export function romanNumeralGenerator(number) {
  const convertRomanNumbersToIntegers = [...number].map(romanValue => romanNumbers[romanValue])

  const calculateConvertedRomanValues = convertRomanNumbersToIntegers.reduce((accumulator, currentValue, index, array) => {
    const nextValue = array[index + 1] // =====> get next value

    if (nextValue > currentValue) { // =====> check next value is greater than currentValue
      return accumulator - currentValue
    }

    return accumulator + currentValue
  }, 0)

  return calculateConvertedRomanValues
}

Result:

PASS  ./index.test.js
  [Function]: romanNumeralGenerator
    ✓ convert one roman number into a number (1 ms)
    ✓ convert more than one roman number into a number
    ✓ subtract the value if the next is greater than the current value (2 ms) 🚀🚀🚀

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total

Bonus

Let's verify if the argument has only valid roman numbers and then transform the value in uppercase.

test('verify each value is a valid roman number', () => {
    expect(romanNumeralGenerator('WRONG')).toBe(`Invalid value! Make sure you are using only roman numbers ${Object.keys(romanNumbers).map(value => value)}`)
})

Result:

Expected: "Invalid value! Make sure you are using only roman numbers I,V,X,L,C,D,M"
Received: NaN

      19 |
      20 |   test('verify each value is a valid roman number', () => {
    > 21 |     expect(romanNumeralGenerator('WRONG')).toBe(`Invalid value! Make sure you are using only roman numbers ${Object.keys(romanNumbers).map(value => value)}`)
         |                                            ^
      22 |   })

Refactor!
Let's go back to the function and check each value. For the first case, we need verify if convertRomanNumbersToIntegers has an undefined value cause in the romanNumbers we already have all roman numbers available.

export function romanNumeralGenerator(number) {
  const convertRomanNumbersToIntegers = [...number].map(romanValue => romanNumbers[romanValue])

// +++
  if (convertRomanNumbersToIntegers.includes(undefined)) return `Invalid value! Make sure you are using only roman numbers ${Object.keys(romanNumbers).map(value => value)}`
// +++

  const calculateConvertedRomanValues = convertRomanNumbersToIntegers.reduce((accumulator, currentValue, index, array) => {
    const nextValue = array[index + 1] // =====> get next value

    if (nextValue > currentValue) { // =====> check next value is greater than currentValue
      return accumulator - currentValue
    }

    return accumulator + currentValue
  }, 0)

  return calculateConvertedRomanValues
}

Test result:

PASS  ./index.test.js
  [Function]: romanNumeralGenerator
    ✓ convert one roman number into a number (1 ms)
    ✓ convert more than one roman number into a number
    ✓ subtract the value if the next is greater than the current value (1 ms)
    ✓ verify each value is a valid roman number 😊😊😊

Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total

Last but not least, let's convert the argument received in the function to uppercase.

test('convert the argument received in the function to uppercase', () => {
  expect(romanNumeralGenerator('xxvi')).toBe(26)
})

Test result:

Expected: 26
Received: "Invalid value! Make sure you are using only roman numbers I,V,X,L,C,D,M"

      23 |
      24 |   test('convert the argument received in the function to uppercase', () => {
    > 25 |     expect(romanNumeralGenerator('xxvi')).toBe(26)
         |                                           ^
      26 |   })
      27 | })

Refactor!
Let's use str.toUpperCase() to do it:

export function romanNumeralGenerator(number) {
// +++
  const transformValuesInUppercase = number.toUpperCase()
// +++

  const convertRomanNumbersToIntegers = [...transformValuesInUppercase].map(romanValue => romanNumbers[romanValue])

  if (convertRomanNumbersToIntegers.includes(undefined)) return `Invalid value! Make sure you are using only roman numbers ${Object.keys(romanNumbers).map(value => value)}`

  const calculateConvertedRomanValues = convertRomanNumbersToIntegers.reduce((accumulator, currentValue, index, array) => {
    const nextValue = array[index + 1] // =====> get next value

    if (nextValue > currentValue) { // =====> check next value is greater than currentValue
      return accumulator - currentValue
    }

    return accumulator + currentValue
  }, 0)

  return calculateConvertedRomanValues
}

Test result:

PASS  ./index.test.js
  [Function]: romanNumeralGenerator
    ✓ convert one roman number into a number (1 ms)
    ✓ convert more than one roman number into a number (1 ms)
    ✓ subtract the value if the next is greater than the current value
    ✓ verify each value is a valid roman number
    ✓ convert the argument received in the function to uppercase 😊😊😊😊

Test Suites: 1 passed, 1 total
Tests:       5 passed, 5 total

That's it.
It's was a simple case in how we can start thinking in TDD.
Hope you enjoy it!

Check out codesandbox

DEV Community: Eder

Create and Deploy your first GraphQL API with Apollo Server 4, TypeGraphQL and Render

Intro

Initial Configuration

Setting up type-graphql

Adding @apollo/server

Let's create our first resolver

Deploying with Railway

Deploying using Render

Wrapping up

Convert a Roman numeral into a number with TDD and javascript

About the challenge

First test scenario

Second test scenario

Third test case

Fourth test scenario

Bonus

Setting up `type-graphql`

Adding `@apollo/server`