Search code examples
laravelvue-apollolaravel-lighthouse

How to create nested relationships in laravel lighthouse and vue apollo


I have the following mutation in 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
  }
}

And I need to bring only the categoryId in this object {connect: $categoryId}.

I also asked my question on GitHub on laravel lighthouse but the answer didn't help me much, unfortunately.

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

If my question is not very clear I can provide a full repo on Github here

Update the problem is 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
  }
}

I am using this mutation in 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>

In the method


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);
        });
    },

Thanks in advance


Solution

  • The variables should look as below:

    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);
            });
        }