Отношения данных и типы соединений с мутациями в Prisma, GraphQL и Apollo - PullRequest
Новая
       143

Отношения данных и типы соединений с мутациями в Prisma, GraphQL и Apollo

0 голосов
/ 21 марта 2020

Извините за длинный пост, но я старался быть как можно более подробным.

Как мне отредактировать мою текущую модель, схему и распознаватель, чтобы иметь возможность сохранять / подключать связанный тип (Поставщик) для моего созданного типа (Элемент) через веб-форму?

Я хочу создать элемент инвентаря и выбрать продавца, который будет связан с этим элементом.

У меня есть такая модель данных Prisma (для простоты у меня есть другие поля, потому что у меня нет проблем с сохранением других полей; это просто с другими типами, где есть связь) ...

Элементы могут иметь или не иметь поставщика, связанного с ними. Продавцы могут иметь или не иметь список элементов, в настоящее время связанных с ними. 

type Item {
  id: ID! @id
  name: String!
  description: String!
  vendor: Vendor
}

type Vendor {
  id: ID! @id
  items: [Item!]
}

У меня есть такая схема graphql (сравните с измененной схемой в конце этого вопроса) ... 

type Mutation {
  createItem(
    name: String! 
    description: String! 
  ): Item!
}

Мой распознаватель: 

async createItem(parent, args, ctx, info) {
  const item = await ctx.db.mutation.createItem(
    {
        data: {
            ...args,
        },
    }, info);

    return item;
}

Мой компонент React содержит следующее: 

const CREATE_ITEM_MUTATION = gql`
  mutation CREATE_ITEM_MUTATION(
    $name: String!
    $description: String!
  ) {
    createItem(
      name: $name
      description: $description
    ) {
      id
      name
      description
      vendor {
        id
      }
    }
  }
`;
const ALL_VENDORS_QUERY = gql`
  query ALL_VENDORS_QUERY {
    vendors {
      id
    }
  }
`;

Позже на веб-странице в моей форме HTML у меня есть: 

<Query query={ALL_VENDORS_QUERY}>
  {({ data, loading }) => (
    <select
      id="vendor"
      name="vendor"
      onChange={this.handleChange}
      value={this.state.vendor}
    >
      <option>Vendor</option>
        {data.vendors.map(vendor => (
          <option key={vendor.id} value={vendor.id}>{vendor.name}</option>
        ))}
    </select>
  )}
</Query>

Я просто не знаю, как подключить продавца к товару через отправку формы. Я могу заставить его работать, если я жестко закодирую идентификатор поставщика в моем резольвере следующим образом: 

async createItem(parent, args, ctx, info) {
  const item = await ctx.db.mutation.createItem(
    {
        data: {
            vendor: {
              connect: { id: "ck7zmwfoxg4b70934wx8kgwkx" } // <-- need to dynamically populate this based on user input from the form
            },
            ...args,
        },
    }, info);

    return item;
}

... но это, очевидно, не то, что я хочу.

Для меня это делает самый разумный способ изменить мою схему так: 

createItem(
  name: String!
  description: String!
  vendor: Vendor <--- added
): Item!

Но когда я это сделаю, я получу это:

Error: The type of Mutation.createItem(vendor:) must be Input Type but got: Vendor.

Как я могу редактировать моя текущая модель, схема и распознаватель, чтобы иметь возможность сохранять / подключать идентификатор поставщика, выбранный в форме?

1 Ответ

1 голос
/ 21 марта 2020

Ответ на мою проблему был найден здесь: Как исправить 'Переменная' $ _v0_data 'получила недопустимое значение', вызванную отношением типов данных - Mutation Resolver

Я распространял аргументы (... args), одновременно передавая аргумент вендора.

Вот моя обновленная мутация: 

createItem(
    name: String!
    description: String!
    vendorId: ID
    ): Item!

и ее преобразователь: 

async createItem(parent, {name, description, vendorId}, ctx, info) {
  const item = await ctx.db.mutation.createItem(
    {
        data: {
            vendor: {
              connect: { id: vendorId }
            },
            name,
            description,
        },
    }, info);

    return item;
}

Бум! 101

...