React-apollo: Compose with both mutation and query, not recognizing query as a function

[kysley]

Hey guys, running into a problem with my compose function, or how I've structured the query.. Here is most, if not all of the relevant code:

const AllFunctions = compose(
  graphql(createVoteYes, {
    props: ({ mutate }) => ({
      createVoteYes: questionId => mutate({
        variables: { questionId },
      }),
    }),
  }),
  (...),
  graphql(getQuestionFromId, {
    options: id => ({
      variables: { id },
    }),
  }),
  (...)
)

And then dispatching -> props

const mapDispatchToProps = (dispatch, ownProps) => ({
    onSubmitVoteYes({ id, voteType }) {
      dispatch(submitVoteRequest())
      ownProps.createVoteYes(id)
        .then(() => {
          dispatch(submitVoteSuccess(id, voteType))
        }).catch(() => dispatch(submitVoteFailure()))
    },
    (...),
    questionFromId({ id }) {
      dispatch(loadQuestionRequest())
      ownProps.getQuestionFromId(id)
        .then(() => {
          dispatch(loadQuestionSuccess())
        }).catch(() => dispatch(loadQuestionFailure()))
    },
})

Using onSubmitVoteYes works fine. However, when I try to call questionFromId, ownProps.getQuestionFromId is not a function is thrown.

I assume it is how I'm defining getQuestionFromId in the compose, but I'm unsure how else I would go about defining a query that takes a variable dynamically :sweat_smile:

Version

• apollo-client: ^2.0.1
• apollo-react: ^2.0.0

[jimmylin212]

Hi @kysley ,

Found solution from https://github.com/howtographql/react-apollo/blob/master/src/components/Search.js

The points is

```javascript
import { withApollo } from 'react-apollo'

class LoginForm extends Component {
// query by client.query
const queryUserResult = await this.props.client.query({
query: QUERY_USER,
variables: { name: value });
}

const MUTATION = gql mutation { // some mutation logic }

const QUERY = gql query { // some query logic }

export default compose(
withApollo,
graphql(MUTATION , { name: 'mutation' })
)(LoginForm)

[kysley]

@jimmylin212 Thanks for the late reply! I should've called for this to be closed this a while ago as I found a different solution to the problem...

What ended up working is adding the 'name' field to the composed graphql query.

graphql(getQuestionFromId, {
    options: ownProps => ({
      variables: { id: ownProps.match.params },
    }),
    name: 'getQuestionFromId',
  }),

[jimmylin212]

So, you call the query by this.props.getQuestionFromId like other mutation do?

good to know you already solve the issue. :smile:

[Quadriphobs1]

I tried with setting name but still getting same error as the query is not a function, also is there a way to not initiate query on mount even after adding network request only options.

[rosskevin]

Closing - housekeeping