How to create nested relationships in laravel lighthouse and vue apollo

Question

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

Ben Heimberg · Accepted Answer · 2020-06-10T14:28:39.130

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

edited Jun 10 '20 at 14:28

answered Jun 10 '20 at 13:53

Ben Heimberg

66
5

It just returns a new book without category, with no errors at all? – Ben Heimberg Jun 10 '20 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. – itwolfpower Jun 10 '20 at 14:00
I don't see any changes – itwolfpower Jun 10 '20 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 – itwolfpower Jun 10 '20 at 14:11
I tried it didn't work, unfortunately ```js Error: "GraphQL error: Variable "$title" of required type "String!" was not provided. GraphQL error: Variable "$image" of required type "String!" was not provided. GraphQL error: Variable "$author" of required type "String!" was not provided. GraphQL error: Variable "$description" of required type "String!" was not provided. GraphQL error: Variable "$link" of required type "String!" was not provided. GraphQL error: Variable "$categoryId" of required type "ID!" was not provided." ``` – itwolfpower Jun 10 '20 at 14:13
The v-models are changing but they don't get the values to the graphql variables.(confused) – itwolfpower Jun 10 '20 at 14:16
1

check git, pr provided – Ben Heimberg Jun 10 '20 at 14:19
Can you add your modifications as an answer here so I can upvote your help. Thanks – itwolfpower Jun 10 '20 at 14:23

How to create nested relationships in laravel lighthouse and vue apollo

1 Answers1