使用graphql-tools自定义类型mock时如何修改数组内的元素属性

问题根因 #

你遇到的name属性不生效、id生效的现象，核心原因有两个：

1. 若你的LineItem类型mock是字段级定义的（如下示例），字段级mock的优先级高于你在父级（Cart）中给子对象赋值的属性：

   const mocks = {
     LineItem: {
       // 字段级mock，只要查询name字段就会执行这个函数，覆盖父级传的任意值
       name: () => 'Item name'
     }
   }
   

   你的id属性没有对应的字段级mock，所以你手动赋的值可以生效，name有字段级mock所以被覆盖。
2. 你之前手动生成数组的写法中，所有元素的name写死为固定值，就算生效也无法得到两个不同的name属性。

解决方案 #

方案1：调整mock为类型级定义，手动生成自定义数组 #

把LineItem的mock调整为返回完整对象的类型级定义，在生成lineItems数组时调用LineItem的mock函数生成基础对象，再覆盖自定义属性：

// 类型级mock，返回完整的LineItem对象
const LineItem = () =>
  ({
    name: 'Item name'
  } as LineItemType)

const Cart = () =>
  ({
    id: 'cart-id',
    // 用索引区分不同元素的属性
    lineItems: [...new Array(2)].map((_, index) => ({
      ...LineItem(), // 继承默认mock值
      id: `line-item-${index}`,
      name: `商品${index + 1}名称` // 自定义不同的name
    })),
  } as ActiveCartType)

// 全局mocks配置
const mocks = {
  LineItem,
  Cart
}

方案2：使用官方MockList生成数组（推荐） #

@graphql-tools/mock提供的MockList原生支持自定义数组元素属性，不需要手动生成空数组再遍历：

import { MockList } from '@graphql-tools/mock'

const mocks = {
  LineItem: () => ({
    name: 'Item name'
  }),
  Cart: () => ({
    id: 'cart-id',
    // 第一个参数指定数组长度，第二个参数为每个元素的自定义mock函数
    lineItems: new MockList(2, (_, index) => ({
      id: `line-item-${index}`,
      name: `自定义商品名称${index + 1}`
    }))
  })
}

这个方案下，你返回的自定义属性会自动覆盖类型级mock的默认值，生成的每个元素属性都可以按索引灵活调整。

内容的提问来源于stack exchange，提问作者Joker