Firebase Dynamic Links with Vue.js and Apollo client bad request 400

Question

I have a vue app and I am trying to do a POST request to firebase dynamic links API with apollo client mutation method but I'm getting a 400 bad request error. I wraopped all the fields with dynamicLinkInfo but have no success and can't get a response.

here is my code

shortlink() {
  this.$apollo.mutate({
    mutation: gql'
      mutation getShortLinks(
      $domainUriPrefix: String!, 
      $link: String!, 
      $androidPackageName: String!, 
      $iosBundleId: String!, 
      $option: String!
      ) {
        shortLinks(input:{
        domainUriPrefix: $domainUriPrefix, 
        link: $link, 
        androidPackageName: $androidPackageName, 
        iosBundleId: $iosBundleId, 
        option: $option
        }) 
        @rest(
        type: "ShortLinks", 
        path: "/v1/shortLinks?key=API_KEY", 
        method: "POST", 
        endpoint: "firebase"
        ) 
        {
          dynamicLinkInfo {
            domainUriPrefix
            link
            androidInfo {
              androidPackageName
            }
            iosInfo {
              iosIpadBundleId
            }
          }
          suffix {
            option
          }
        }
      }
    '
    ,
    variables: {
      domainUriPrefix: 'https://website.page.link',
      link: 'https://website.com?someid=1',
      androidPackageName: 'package_name',
      iosBundleId: 'bundle_name',
      option: 'UNGUESSABLE'
    },
  }).then(data => {
    console.log(data) 
  })
  .catch(error => {
    console.error(error)
  });
},

This returns a 400 bad request error.

"code": 400,
"message": "Invalid JSON payload received. Unknown name \"domainUriPrefix\": Cannot find field.\nInvalid JSON payload received. Unknown name \"link\": Cannot find field.\nInvalid JSON payload received. Unknown name \"androidPackageName\": Cannot find field.\nInvalid JSON payload received. Unknown name \"iosBundleId\": Cannot find field.\nInvalid JSON payload received. Unknown name \"option\": Cannot find field.",

Answer 1

I end up using fetch to do a post request

working code here

shortlink() {
  const requestOptions = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ 
      dynamicLinkInfo: {
        domainUriPrefix: "https://website.page.link",
        link: "https://website.com?someid=1,
        androidInfo: {
          androidPackageName: "package_name"
        },
        iosInfo: {
          iosBundleId: "bundle_name"
        }
      }
    })
  };
  fetch(import.meta.env.VITE_FIREBASE_BASE_URL, requestOptions)
    .then(async response => {
      const data = await response.json();

      if (!response.ok) {
        const error = (data && data.message) || response.status;
        return Promise.reject(error);
      }

      this.shortLink = data.shortLink;
    })
    .catch(error => {
      this.errorMessage = error;
      console.error('There was an error!', error);
    });
}