React-apollo: can't pass the variables

[sneerin]

I have s sample code and it fails with Connect(Reviews) is expecting a variable: 'id'

  const reviewsQuery = graphql(REVIEWS_QUERY, {
    props: ({ mutate }) => ({
      getReviews: ({ id }) =>
        mutate({
          variables: { id },
        }),
    }),
  });

when I add :

  const reviewsQuery = graphql(REVIEWS_QUERY, {
    options: () => ({ variables: { id: "581c867030ad18001069a5ae" } }), // fake user for now
    props: ({ mutate }) => ({
      getReviews: ({ id }) =>
        mutate({
          variables: { id },
        }),
    }),
  });

i've got mutate not found or when I pass it, mutate is not a function

please advice what am I doing wrong

[smithaitufe]

What exactly do you want to achieve? It is best you explain and show codes you have written other than the snippet

[sneerin]

What I'm trying to do is create function getReviews that will trigger query, and I want to pass options(id). pretty simple use case. It's not covered in the docs, and the code itself is written quite unreadable, so I can understand quickly how to do so, I paused my activity on Apollo so far.

[smithaitufe]

this is what you can do example

onAcademicSessionChanged = (e) => {
        this.setState({ academicSessionId: e.target.value, loadingCourses: true })
        this.props.client.query({
            query: INSTRUCTOR_COURSE_LIST_QUERY,
            variables: { programId: this.state.programId, academicSessionId: e.target.value }
        }).then(({data: { loading, instructorCourses: allocations}}) => {
            this.setState({ allocations, loadingCourses: false })
        })
    }

then in your component, you decorate it this way

const InstructorCourseEnrollmentListPageWithData = compose(
    graphql(PROGRAM_LIST_QUERY, {
        props: ({ programListQuery: { loading, programs } }) => ({ loadingPrograms: loading, programs }),
        name: 'programListQuery'
    }),
    graphql(INSTRUCTOR_COURSE_LIST_QUERY, {
        options: ({ programId, academicSessionId }) => ({
            variables: {
                programId,
                academicSessionId
            }
        }),
        props: ({ instructorCoursesQuery: { loading, refetch, instructorCourses } }) => ({
            loadingCourses: loading,
            allocations: instructorCourses,
            refetchCourseList: refetch
        }),
        skip: (ownProps) => ownProps.academicSessionId === undefined && ownProps.programId === undefined,
        name: 'instructorCoursesQuery'
    })
)(InstructorCourseEnrollmentListPage)

export default withApollo(InstructorCourseEnrollmentListPageWithData)

Notice in the last part, I used withApollo. That will ensure that the client prop which you supplied to the provider is passed to your component as prop

Then this is my import statement

import { graphql, compose, withApollo } from 'react-apollo'

Let me know if this helps

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as no recent activyt. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to React Apollo!