Adding chimp 3 to an existing Application

We will show you how to add chimp to an existing application based on our simple example

This article is based on my notes from adding chimp to an existing app, I'd recommend watching it there as I discuss the steps and reason for some of the design decisions in Chimp in depth. But if you want to be able to copy/paste some of the code, or if you want to be able to easier find this article with google in the future, I'm leaving the notes here. :) The final diff is available here, but it's highly recommend to watch the video or try the steps manually to get a "feel" of the chimp workflow. The diff tells only half ot the story.

Note: We will base our work on this repository: https://github.com/xolvio/chimp-gql-tiny-example/tree/data-sources and the selected branch (data-sources)

First we will initialize chimp:

npx chimp init	

We need to manually configure jest.config.js

const { pathsToModuleNameMapper } = require("ts-jest/utils");  
const { compilerOptions } = require("./tsconfig");  
  
module.exports = {  
  preset: "ts-jest",  
  testEnvironment: "node",  
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {  
  prefix: "<rootDir>/"  
  })  
};

I'm removing these two dependencies from the package.json, because they will be used as build-time, not run-time.

"@graphql-tools/graphql-file-loader": "^6.0.18",  
"@graphql-tools/load": "^6.0.18",

Add the tsconfig-paths to the start script

-r tsconfig-paths/register

Now we are ready to install dependencies:

yarn

Prepare context (./src/context.ts):

import { dataSources } from "~app/dataSources";  
  
export type GqlContext = { dataSources: ReturnType<typeof dataSources> };

Remove the example module.

Move Library to modules

Change dataSources.ts Library path

modules/Library/Library.graphql

Library.books needs @computed 
Book.Library needs @link

Generate files with chimp:

yarn chimp

Optional: to make Webstorm happy mark top schema.graphql and generated/graphql/schema.ts as plaintext.

Move resolvers:
BookLibrary
LibraryBooks

There will be an error in return type of LibraryBooks - add @computed to Author.graphql book->Author

resolvers.ts - use chimpResolvers

import { resolvers as chimpResolvers } from "~generated/graphql/resolvers";

schema.ts - use ./schema.graphql

Check example query

query {
  libraries {
    branch
    books {
      author {
        name
      }
      library {
        branch
      }
    }
  }
}

The existing test is passing
the new ones are as well although they are not implemented.
The one lines are probably not worth testing (types are doing their job)
BookLibrary has some logic so let's test that one.

test("BookLibrary", async () => {
  const context = td.object<GqlContext>();
  td.when(context.dataSources.libraryApi.getLibraries()).thenResolve([
    { id: "matchingId", branch: "matchingBranch" },
    { id: "notMatchingId", branch: "notMatchingBranch" },
  ]);
  const parent: ParentType = {
    library: "matchingId",
    id: "some id ",
    title: "some title",
  };

  const result = await testBookLibrary(parent, context);

  expect(result).toEqual({ id: "matchingId", branch: "matchingBranch" });
});

We also want to see it fail. - change === to !== in BookLibrary.ts resolver -

libraries.find((l) => l.id !== book.library)

Once we see it fail we know that the test is doing it's job.

Move Author to ./src/modules/

Change dataSources

yarn chimp

Looks I'm missing one resolver, let's add that one.


extend type Author {
  books: [Book!]! @link
}

to src/modules/Library.graphql

query {
  libraries {
    branch
    books {
      author {
        name
        books {
          id
          title
        }
      }
      library {
        branch
      }
    }
  }
}

remove resolvers and schema

and finally in index.ts:

import { schema } from "~generated/graphql/schema";

Let me know if you have any questions or thoughts in the comments below.


Let us help you on your journey to Quality Faster

We at Xolv.io specialize in helping our clients get more for less. We can get you to the holy grail of continuous deployment where every commit can go to production — and yes, even for large enterprises.

Feel free to schedule a call or send us a message below to see how we can help.

User icon
Envelope icon

or

Schedule a 30m call
  • Better way to use useReducer with TypeScript

    Introducing useComplexState hook, - a small wrapper combining Redux Toolkit, useReducer with some extra syntax sugar to make things even simpler and more to-the-point.

  • Dealing with randomness in tests

    A few patterns to help you deal with randomness in your codebase.

  • How to deal with the yarn link "There's already a package called x registered" error

    Short discussion about helpful error messages, and a solution to the problem