nuxt.js - Nuxt-Apollo-Graphql - Nested mutation with relations

Question

I'm searching for 3 days how to achieve an nested mutation.

I'm using Nuxt JS, Strapi with Graphql and graphql-tag module, and MongoDb

I have two collections : Heaturls and heatmap, with a relation Heatmap has and belongs to one Heaturl

I use store to query and mutate.

What I want is to add new entry to my Heatuls collection and after it create new entry in my Heatmap collection with the ID of my previously created heaturl entry.

Here are my functions Store.js

async saveHeaturl({
    commit,
    dispatch
  }, datas) {
    console.log(this.app)
    return await this.app.apolloProvider.clients.defaultClient.mutate({
      mutation: CREATE_HEAT_MUTATION,
      variables: {
        ...datas,
        site: this.$auth.$state.user.site,
      }
    }).then((res) => {
      commit('addHeatItem', res.data.createHeaturl.heaturl)
      console.log('res ???', res.data)
      dispatch("saveHeatmap", res.data.createHeaturl.heaturl)
    })
  },
async saveHeatmap({
    commit,
    
  }, datas) {
    console.log("on a bien disptach le bordel", datas)

    return await this.app.apolloProvider.clients.defaultClient.mutate({
      mutation: CREATE_HEATMAP_MUTATION,
      variables: {
        heatdatas:JSON.stringify({}),
        heaturl_id: datas._id
      }
    }).then(res => {
      console.log("res ======", res)
    })
  },

The saveHeatmap is dispatch after saveHeaturl is done.

Here are my query structures

export const CREATE_HEATMAP_MUTATION = gql `
  mutation createHeatmap($heatdatas: JSON!, $heaturl_id: ID!) {
  createHeatmap(
    input: { data: { heatdatas: $heatdatas, heaturl_id: $heaturl_id } }
  ) {
    heatmap {
      _id
      heaturl_id {
        _id       
      }
    }
  }
}
`

export const CREATE_HEAT_MUTATION = gql `
  mutation createHeaturl(
  $status: Boolean!
  $recordingflow: Int!
  $urlname: String!
  $pagecasting: Boolean!
  $pageurl: String!
  $datamatching: Int!
  $shortdesc: String!
  $pagesnapshot: JSON!
  $site:ID!
) {
  createHeaturl(
    input: {
      data: {
        urlname: $urlname
        recordingflow: $recordingflow
        status: $status
        pagecasting: $pagecasting
        pageurl: $pageurl
        datamatching: $datamatching
        shortdesc: $shortdesc
        pagesnapshot: $pagesnapshot
        site:$site
      }
    }
  ) {
    heaturl {
      _id
      createdAt
      status
      urlname
      pageurl
      shortdesc

    }
  }
}
`

When I use my form to save my heaturl, everything is ok (it's saved in my DB) and I get the last created id. When I dispatch the second action, I always get an error.

{,…}
data: {createHeatmap: null}
createHeatmap: null
errors: [{message: "Cannot convert object to primitive value", locations: [{line: 2, column: 3}],…}]
0: {message: "Cannot convert object to primitive value", locations: [{line: 2, column: 3}],…}
extensions: {code: "INTERNAL_SERVER_ERROR", exception: {,…}}
locations: [{line: 2, column: 3}]
message: "Cannot convert object to primitive value"
path: ["createHeatmap"]

I don't know how to solve this issue. I've tried changing types format without succes.

I don't understand why I have such error. I have other relations with others collection, and it's working fine.

Can anyone give me a clue or any tutorial to solve my problem.

Many thanks to everyone

Fabien

question from:https://stackoverflow.com/questions/66051496/nuxt-apollo-graphql-nested-mutation-with-relations

Answer 1

Waitting for answers