时间戳

首页 > 解决方案 > 创建包含不同其他项目数组的项目的突变

graphql - 创建包含不同其他项目数组的项目的突变

问题描述

我在一个 GraphQL 副项目中工作，以了解更多关于它的信息。我正在做一个简单的照片/相册网站。我可以创建上传不同的照片，也可以创建相册。我现在要做的是：创建一个带有名称、描述...的相册，我将显示您上传到页面的所有图片。您应该可以选择任意数量的图片，这些图片将链接到该相册。

我面临的问题是我无法让这种关系发挥作用。我在前端使用带有 Yoga 和 Prisma 和 Apollo 的 GraphQL。

我将在这里向您展示我拥有的文件：

数据模式.graphql

type Picture {
  id: ID! @id
  title: String!
  description: String!
  image: String!
  largeImage: String
  createdAt: DateTime! @createdAt
  updatedAt: DateTime! @updatedAt
}

type Album {
  id: ID! @id
  title: String!
  description: String
  coverImage: String
  largeCoverImage: String
  createdAt: DateTime! @createdAt
  updatedAt: DateTime! @updatedAt
  pictures: [Picture]
}

架构.graphql

#import * from './generated/prisma.graphql'

type Mutation {
  createPicture(title: String, description: String, image: String, largeImage: String): Picture!
  createAlbum(title: String, description: String, coverImage: String, largeCoverImage: String pictures:[String]): Album!
  updateAlbum(id: ID!, title: String, description: String, coverImage: String, largeCoverImage: String): Album!
}

突变.js

const Mutations = {
  async createAlbum(parent, args, ctx, info) {
    const album = await ctx.db.mutation.createAlbum({
      data: {
        ...args
      }
    }, info)
    return album;
  }
};

module.exports = Mutations;

然后，在我有提交新专辑创建表单的前端，我使用 graphql-tag 定义了突变：

const CREATE_ALBUM_MUTATION = gql`
  mutation CREATE_ALBUM_MUTATION(
    $title: String!
    $description: String
    $coverImage: String
    $largeCoverImage: String
    $pictures: [String]
  ) {
    createAlbum(
      title: $title
      description: $description
      coverImage: $coverImage
      largeCoverImage: $largeCoverImage
      pictures: $pictures
    ) {
      id
    }
  }
`;

然后我使用 onSubmit 方法将表单包裹在 Mutation 组件周围：

      <Mutation mutation={CREATE_ALBUM_MUTATION}>
        {(createAlbum, { loading, error }) => (
          <Form onSubmit={async e => {
            e.preventDefault();
            const res = await createAlbum({
              variables: {
                ...this.state,
                coverImage: this.state.coverImage || RandomFallbackCoverImageAlbum()
              }
            });
            console.log('response', res);
          }}>

使用此代码，当我提交新专辑时，出现此错误：

Error: Variable "$_v0_data" got invalid value { title: "qqqqw", description: "qqqqw", coverImage: "https://images.unsplash.com/photo-1416169607655-0c2b3ce2e1cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80", largeCoverImage: "", pictures: ["cjyehm6qty18w0b53s501aqiy", "cjyei64yyyd690b53pxtxzona", "cjytt66xhz0sx0b53zqm9jiag"] }; Field "0" is not defined by type PictureCreateManyInput at value.pictures.
Variable "$_v0_data" got invalid value { title: "qqqqw", description: "qqqqw", coverImage: "https://images.unsplash.com/photo-1416169607655-0c2b3ce2e1cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80", largeCoverImage: "", pictures: ["cjyehm6qty18w0b53s501aqiy", "cjyei64yyyd690b53pxtxzona", "cjytt66xhz0sx0b53zqm9jiag"] }; Field "1" is not defined by type PictureCreateManyInput at value.pictures.
Variable "$_v0_data" got invalid value { title: "qqqqw", description: "qqqqw", coverImage: "https://images.unsplash.com/photo-1416169607655-0c2b3ce2e1cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80", largeCoverImage: "", pictures: ["cjyehm6qty18w0b53s501aqiy", "cjyei64yyyd690b53pxtxzona", "cjytt66xhz0sx0b53zqm9jiag"] }; Field "2" is not defined by type PictureCreateManyInput at value.pictures.

我认为我没有在 CreateAlbum 突变上正确引用 Picture 模型，但我正在努力理解它应该如何......任何帮助将不胜感激！

非常感谢

标签： graphqlprismaprisma-graphql

解决方案

我认为您的主要问题是您尚未在 datamodel.prisma （或您所拥有的 .graphql ）中建立图片和相册之间的关系。

type Picture {
  ...
  albums: [Album] @relation(name: "PictureToAlbum")
}

type Album {
  pictures: [Picture] @relation(name: "PictureToAlbum")
}

由于您似乎是在相册之前创建图片并允许一张照片可以属于多个相册的可能性，所以我将图片的“相册”属性作为可为空的数组。

这应该满足关系。

当您定义您的突变并创建您的“CREATE_ALBUM_MUTATION”时，您将输入作为pictures:[String]预期关系的位置pictures:[ID]。

在 Playground 中测试这样的突变总是最容易的，因为您可以轻松查看预期输入并直接获取任何错误。

推荐阅读