Getting Bad Request from graphql call

Question

I am using the vue-apollo with VueJs. Upon clicking the I trigger the 'query' function which makes the graphql api call but i always get a bad request response.

Please tell me what am I missing? Thank you in advance.

This is my apollo client:

import { ApolloClient, HttpLink } from '@apollo/client/core';
import { InMemoryCache } from '@apollo/client/cache';

let apolloClient :any;

export function createApolloClient() {
  if (apolloClient) {
    return apolloClient;
  }

  return apolloClient = new ApolloClient({
    link: new HttpLink({
      uri: 'http://localhost:8080/graphql',
      fetchOptions: {
      mode: 'no-cors', // no-cors, *cors, same-origin
  }
  }),
    cache: new InMemoryCache()
  });
}

Here is how I am consuming it:

const result = ref(null);

async function query() {
 
  const apolloClient = createApolloClient();

  try {
          const queryResult = await apolloClient.query({
        
          query: gql`
          query Parcel($ownerZipcode: String) {
              Parcel(Owner_Zipcode: $ownerZipcode) {
                PIN
                Owner_Name
                Owner_Zipcode
              }
            }
          `,
          variables: {
            parcelId: "7657574gg"
          }
        });
        console.log('queryResult is ',JSON.stringify(queryResult));
        result.value = queryResult.data;
    
       
      } catch(error) {
        console.error(error);
      }
    }
})
</script>

<template> 
    <button @click="query">Button</button>
    <div>{{ result }}</div>
</template>