0

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

1 Answer 1

1

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);
        });
    }
8
  • It just returns a new book without category, with no errors at all? Jun 10, 2020 at 13:59
  • No it returns an error because it can't find what $categoryId is I uploaded the frontend as well now you can have a look. Jun 10, 2020 at 14:00
  • I don't see any changes Jun 10, 2020 at 14:07
  • Not working Error: "GraphQL error: Variable "$categoryId" of type "Int!" used in position expecting type "ID"." I think it needs ID! maybe Jun 10, 2020 at 14:11
  • 1
    check git, pr provided Jun 10, 2020 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.