mlg87

// ./src/AnotherThing/index.tsx
import React from "react";

import { BalloonPickerThatHasAllOfTheNeededLogicInItButForSomeReasonRequiresMeToPassAMutation } from "../Balloon/Picker";
import {
 useGetSelectedBalloonLocalQuery,
 useGetBalloonsQuery,
 useSetSelectedBalloonLocalMutation,
} from "../types/graphql";

mlg87

// ./package.json
{
 ...
 "scripts": {
   ...
   "generate:schema": "graphql-codegen -r dotenv/config"
 }
}

mlg87

# ./codegen.yml
overwrite: true
schema:
 - localSchema.js
 - ${SCHEMA_PATH}/graphql: # <-- this is for our remote schema, you'll probably have something similar
     headers:
       Authorization: ${AUTH0_ACCESS_TOKEN}
generates:
 src/types/graphql.tsx:
   documents: # <-- your app structure may be different, but this will pick up the queries.ts and mutations.ts files created earlier

mlg87

// ./localSchema.js
const { loadFilesSync } = require("@graphql-tools/load-files");
const { mergeTypeDefs } = require("@graphql-tools/merge");

const loadedFiles = loadFilesSync(`${__dirname}/src/**/schema.js`);
module.exports.schema = mergeTypeDefs(loadedFiles);

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({

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/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/queries.ts
import gql from "graphql-tag";

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

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

mlg87

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

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

 type Balloon {

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?