mlg87

Express & Postgres via Knex

Note: <example> is meant to denote text replaced by you (including brackets).

Setup

// global dependencies
npm install -g knex

mlg87

async function doSomething(data) {
    if(data.ok) {
        return await db.insert(data)
    }

    if(typeof data === 'string') {
        return new Alert(data)
    }

    if(data.type === 'result') {

mlg87

// ./SomeClass.ts

export default class SomeClass {
    public static myMethod(params: any) {
        ... do something
    }
}

// ./SomeComponent.tsx

mlg87

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */

'use strict';

mlg87

Using Apollo's local cache for global state management with Typescript, codegen and remote resolvers

If your project is using the apollo-client to communicate with your GraphQL backend, there is no need to include redux or mobx for the global state management; you can store this state in the same Apollo client you are already using. This will be a contrived example, but this post will cover:

• Setting up local queries and mutations to take advantage of the cache
• Integrating the apollo-client you are already using with the local graphql
• Setting up a GraphQL schema locally to use for typeDefs and codegen
• Using @graphql-codegen to create custom hooks for your queries and mutations

Why did I want to do this?

mlg87

// src/Balloon/schema.js
const gql = require("graphql-tag");

module.exports = gql`
 input BalloonInput {
   color: String!
   id: ID!
 }

 type Balloon {

mlg87

// src/Balloon/queries.ts
import gql from "graphql-tag";

//
// ─── GQL TAGS ───────────────────────────────────────────────────────────────────
//

export const GetSelectedBalloonLocal = gql`
 query GetSelectedBalloonLocal {
   selectedBalloon @client {

mlg87

// src/Balloon/mutations.ts
import { Resolver } from "apollo-client";
import gql from "graphql-tag";

//
// ─── GQL TAGS ───────────────────────────────────────────────────────────────────
//

export const SetSelectedBalloonLocal = gql`
 mutation SetSelectedBalloonLocal($selectedBalloon: BalloonInput!) {

mlg87

// src/Balloon/defaults.ts
import { IBalloon } from "../types/graphql"; // <-- we will auto-generate this file a bit later in the post

const defaultSelectedBalloon: IBalloon = {
 color: "",
 id: "",
};

export default {
 selectedBalloon: { ...defaultSelectedBalloon, __typename: "Balloon" },

mlg87

// src/client.ts
import { InMemoryCache } from 'apollo-cache-inmemory';

import balloonDefaultCacheValues from './Balloon/defaults';
import { setSelectedBalloonMutationResolver } from './Balloon/mutations';
import balloonSchema from './Balloon

const cache = new InMemoryCache();

export const client = new ApolloClient({