How to include variables in the React Apollo query and execute it? - reactjs

Question

I'm using compose to perform multiple queries in a component. I want to be able to use variables for the queries.
1) How do I include the variables in the query?
2) How do I execute the query?
Following is the component:
import React from 'react'
import {
View,
} from 'react-native'
import { graphql, withApollo } from 'react-apollo'
import { compose } from "recompose";
import { GET_ITEM, GET_REVIEWS } from '../graphql/query'
const PostingDetail = props => {
const itemId = props.navigation.getParam('itemId', null)
console.log("props", props.itemQuery)
return (
<View>
</View>
)
}
export default compose(
withApollo,
graphql(GET_ITEM, {
name: 'itemQuery',
options: ({ itemId }) => ({
variables: {
id: itemId
}
})
}),
graphql(GET_REVIEWS, { name: 'reviewsQuery'}),
)(PostingDetail)
I want to be able to use itemId as the variables for the query, however, the above code displays the following error:
"message": "Variable \"$id\" of required type \"ID!\" was not
provided."

Answer 1

This property allows you to configure the name of the prop that gets passed down to your component. By default if the GraphQL document you pass into graphql() is a query then your prop will be named data. If you pass a mutation then your prop will be named mutate. While appropriate these default names collide when you are trying to use multiple queries or mutations with the same component. To avoid collisions you may use config.name to provide the prop from each query or mutation HOC a new name.
Example
export default compose(
graphql(gql`mutation (...) { ... }`, { name: 'createTodo' }),
graphql(gql`mutation (...) { ... }`, { name: 'updateTodo' }),
graphql(gql`mutation (...) { ... }`, { name: 'deleteTodo' }),
)(MyComponent);
function MyComponent(props) {
// Instead of the default prop name, `mutate`,
// we have three different prop names.
console.log(props.createTodo);
console.log(props.updateTodo);
console.log(props.deleteTodo);
return null;
}
And the key of the variable you want to use is not in the query statement, showing the error message.
use variables of options
export default graphql(gql`
query ($width: Int!, $height: Int!) {
...
}
`, {
options: (props) => ({
variables: {
width: props.size,
height: props.size,
},
}),
})(MyComponent);