how to create apollo client query with custom types

Question

I have to do a query and I have to pass a nested variable. Below is the working query when I use apollo graphql client interface. It is giving me expected result. Below is the working query

query($input: MyProductInput!){
  MyProductCategories(input: $input){
    id,
    name
  }
}

Variable which i am passing

{
  "input": {
    "locale": "ENG"
  }
}

MyProductInput type look like this at SERVER

type MyProductInput {
  locale: Locale!
}
enum Locale {
  IND
  AUS
  ENG
}

when I try to call the same query from my React App, it is giving me error, It says 400 bad request. My React query look like this.

const PRODUCT_LIST = gql`
  query ($locale: String!) {
    MyProductCategories(input: {locale: $locale}){
      id,
      name
    }
  }
`;

const { loading, error, data } = useQuery(PRODUCT_LIST, {
  variables: {
    "input": {
      "locale": "ENG"
    }
  },
});

How can i convert my react query to accommodate custom types??

Note: I am using JavaScipt not Typescript at Front-end side

Answer 1

Take a look in the docs:

https://www.apollographql.com/docs/react/api/react/hooks/

And can you see more information about the error message you get back?

Answer 2

I got the answer. I just had to do this $input: MyProductInput! within query and pass $input to MyProductCategories. Below is working example.

const PRODUCT_LIST = gql`
  query ($input: MyProductInput!) {
    MyProductCategories(input: $input){
      id,
      name
    }
  }
`;

React Query using hooks

const { loading, error, data } = useQuery(PRODUCT_LIST, {
  variables: {
    "input": {
      "locale": "ENG"
    }
  },
});

No need to worry about custom types as it is already there at server. Just pass is as it is and set the variables