如何在 laravel lighthouse 和 vue apollo 中创建嵌套关系

Question

我在 vue apollo 中有以下突变

mutation (
      $title: String!
      $image: String!
      $author: String!
      $description: String!
      $link: String!
      $featured: Boolean
      $category: { connect: Int! }
)
{
  createBook(
    input: {
      title: $title
      image: $image
      author: $author
      description: $description
      link: $link
      featured: $featured
      category: $category
    }
  ) {
    id
    title
    author
  }
}

我只需要在这个对象 {connect: $categoryId} 中带上 categoryId。

我还在 GitHub 上的 laravel lighthouse 上问了我的问题，但不幸的是，答案对我没有多大帮助。

mutation (
      $categoryId: Int!
) {
  createBook(
    input: {
      category: {
        connect: $categoryId
    }
  ) {}
}

如果我的问题不是很清楚，我可以在 Github 上提供完整的 repo here

更新问题就在这里

AddBook.gql

mutation(
  $title: String!
  $image: String!
  $author: String!
  $description: String!
  $link: String!
  $featured: Boolean
  $category: Int!
) {
  createBook(
    input: {
      title: $title
      image: $image
      author: $author
      description: $description
      link: $link
      featured: $featured
      category: { connect: $categoryId } // $categoryId undefined
    }
  ) {
    id
    title
    author
  }
}

我在 AddBook.vue 中使用了这个突变

 <div class="form-group">
        <ApolloQuery
          :query="require('@/graphql/queries/Categories.gql')"
          class="move-down"
        >
          <template slot-scope="{ result: { data, loading } }">
            <!-- Some content -->
            <div v-if="loading">Loading...</div>
            <select v-else v-model="categoryId">
              <option
                v-for="category of data.categories"
                :key="category.id"
                :value="category.id"
              >
                {{ category.name }}
              </option>
            </select>
          </template>
        </ApolloQuery>

在方法中

addBook() {
      this.$apollo
        .mutate({
          // Query
          mutation: addBook,
          // Parameters
          variables: {
            $title: this.title,
            $image: this.image,
            $author: this.author,
            $description: this.description,
            $link: this.link,
            $featured: this.featured,
            $categoryId: this.categoryId,  // here is the problem
          },
        })
        .then((data) => {
          // Result
          console.log(data);
        })
        .catch((error) => {
          // Error
          console.error(error);
        });
    },

提前致谢

Answer 1

变量应如下所示：

addBook() {
      this.$apollo
        .mutate({
          // Query
          mutation: addBook,
          // Parameters
          variables: {
            title: this.title,
            image: this.image,
            author: this.author,
            description: this.description,
            link: this.link,
            featured: this.featured,
            categoryId: this.categoryId,  // here is the problem
          },
        })
        .then((data) => {
          // Result
          console.log(data);
        })
        .catch((error) => {
          // Error
          console.error(error);
        });
    }