I got an issue with graphQL when I was developing the shopify app. The logic is simple. I need to get lineItems from the shopify store using the graphQL. Here is the code for gql.
const GET_ORDER_DETAIL = gql`
query getOrderDetail($orderId: String) {
order(id: $orderId) {
name
physicalLocation {
id
}
lineItems (first:100){
edges {
node {
id
}
}
}
}
}
`;
And here is my React code.
{
this.state.refund_list.map((list, index) => {
const orderId = `gid://shopify/Order/${list.order_id}`; // I got correct orderId.
return (
<Query key={index} query={GET_ORDER_DETAIL} variables={{ id: orderId }}>
{({ data, loading, error }) => {
if (loading) return <div>loading...</div>;
if (error) return <div>{error}</div>;
console.log(data);
return <div>test</div>;
}}
</Query>
);
})
}
And here is Error sentence.
Uncaught Error: Objects are not valid as a React child (found: Error: GraphQL error: Type mismatch on variable $orderId and argument id (String! / ID!)). If you meant to render a collection of children, use an array instead.
I found the correct type for $orderId
.
I changed the String
to ID!
Here is my fixed code.
const GET_ORDER_DETAIL = gql`
query getOrderDetail($orderId: ID!) {
...
}
`;
...
<Query key={index} query={GET_ORDER_DETAIL} variables={{ orderId }}>
...