Question

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

我面临的问题是我无法使这种关系正常运行。我正在将GraphQL与Yoga，Prisma和Apollo一起使用在前端。

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

datamode.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]
}

schema.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!
}

mutation.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模型，但是我在努力理解应该如何上花费了很多时间... 任何帮助将不胜感激！

非常感谢

Answer 1

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

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

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

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

这应该满足关系。

在定义突变并创建“ CREATE_ALBUM_MUTATION”时，您输入的内容为pictures:[String]，在此情况下，关系将是pictures:[ID]。

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

创建包含包含其他不同项目数组的项目的变异

1 个答案: