Passing a variable in my graphql query is giving me an error 500

[Benjamin]

Hello, I need help about graphql

In my VTEX projet I’m using the VTEX.search-graphql app to get information.
So I created a graphql file with this query inside :

query ProductQuery($id: String!) {
  product(identifier: **{ field: id, value: $id}**) @context(provider: "vtex.search-graphql") {
    productName
    productReference
    brand
    description
  }
}

I’m calling this query in a react typescript file like that :

import { useQuery } from 'react-apollo'
import ProductQuery from '../../queries/getProductById.graphql'

const { data, loading, error } = useQuery(ProductQuery, {
	variables: {
		id: "9978",
	}
})

if (loading) {
	return <div>
		Loading	
	</div>
}
if (error)
	console.log(error)
else
	console.log({data})

I got an error 500 with this code above and if I’m just hardwriting the id in my GraphQL file I got the result I want.

for exemple this following code is working :

query ProductQuery($id: String!) {
  product(identifier: **{ field: id, value: "1"}**) @context(provider: "vtex.search-graphql") {
    productName
    productReference
    brand
    description
  }
}

Which is not my goal tho as you can guess

I don’t understand where is my mistake.
Thanks in advance for helping me

[Benjamin]

My error 500 was this one :

Error: Network error: Response not successful: Received status code 500
    at new ApolloError (bundle.esm.js:63:1)
    at ObservableQuery.push.../../../../modules/ff03acce7dd0a09128c97887512ff7d20b8e62890ee369223344f929a9b683a9/dev/node_modules/apollo-client/bundle.esm.js.ObservableQuery.getCurrentResult (bundle.esm.js:159:1)
    at QueryData.push.../../../../modules/ff03acce7dd0a09128c97887512ff7d20b8e62890ee369223344f929a9b683a9/dev/node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.QueryData.getQueryResult (react-hooks.esm.js:265:1)
    at QueryData._this.getExecuteResult (react-hooks.esm.js:73:1)
    at QueryData.push.../../../../modules/ff03acce7dd0a09128c97887512ff7d20b8e62890ee369223344f929a9b683a9/dev/node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.QueryData.execute (react-hooks.esm.js:106:1)
    at react-hooks.esm.js:380:43
    at useDeepMemo (react-hooks.esm.js:354:24)
    at useBaseQuery (react-hooks.esm.js:380:1)
    at useQuery (react-hooks.esm.js:399:1)
    at MyPreownedProductDetailPage (MyPreownedProductDetailPage.tsx:42:44)
    at renderWithHooks (react-dom.development.js:15246:18)
    at updateFunctionComponent (react-dom.development.js:17063:20)
    at beginWork$1 (react-dom.development.js:18636:16)
    at beginWork$$1 (react-dom.development.js:23331:14)
    at performUnitOfWork (react-dom.development.js:22349:12)
    at workLoopSync (react-dom.development.js:22323:22)

I eventually resolved it tho. The mistake I did was in the query, the type of id wasn’t String but ID :

query ProductQuery($id: String!  ->  ID!) {
  product(identifier: **{ field: id, value: $id}**) @context(provider: "vtex.search-graphql") {
    productName
    productReference
    brand
    description
  }
}