JoSuzuki

const cache = new InMemoryCache({
  possibleTypes: {
    MergeableTypes: mergeableTypesArray,
  },
  typePolicies: {
    MergeableTypes: {
      merge: true,
    },
  },
});

JoSuzuki

const { isInterfaceType, isObjectType } = require('graphql');

module.exports = {
  plugin: (schema, _documents, _config) => {
    const typesMap = schema.getTypeMap();

    let fileString =
      '/* This is an auto-generated file by generate-apollo-mergeable-types.js */\n\n';
    fileString += 'export const mergeableTypesArray = [\n';

JoSuzuki

overwrite: true
schema: '../../../app/graphql/schema.graphql'
generates:
  ./src/schema-types/fragments/introspection-result.ts:
    plugins:
      - fragment-matcher
    config:
      apolloClientVersion: 3
  ./src/schema-types/fragments/apollo-mergeable-types.ts:
    plugins:

JoSuzuki

const MyApp = () => {
  return (
    <div>
      <Navbar
        items={[
          {
            label: 'Home',
            href: '/home',
          },
          {

JoSuzuki

interface NavbarProps {
  items: {
    component: React.ReactElement;
    link: { href: string, label: string };
  }[];
}

JoSuzuki

const MyApp = () => {

  return (
    <div>
      <Navbar
        items={[
          {
            label: 'Home',
            href: '/home',
          },

JoSuzuki

const MyApp = () => {
  return (
    <div>
      <Navbar>
        <Link href="/home">Home</Link>
        <Link href="/products">Products</Link>
        <Button onClick={openSupport}>Support</Button>
        <Link href="/about">About</Link>
      </Navbar>
      <Main />

JoSuzuki

Chapter 0: Setup

Recently I came across a bug that took me a day to understand what was happening. Below is a sample reproduction of the relevant files I was working with:

app/models/user.rb

class User < ApplicationRecord
  # columns id, email, name
  has_many :comments, dependent: :destroy
end