React-apollo: Skip not working as expected

[YannisMarios]

How to reproduce the issue:

Hi I am using the same component/form to create and edit a company in my app.

When I edit an existing company the code below correctly prints the id of the company:

graphql(getCompany,
    { options: (props) => {
        console.log(props.location.state.id)
         return {
            variables: { id: props.location.state.id },
            skip : !props.location.state
    }}}
 )

When I create a new company I want to skip the getCompany query because obviously the id is undefined. But skip is not working as expected and the query is not skipped and an error is thrown:

TypeError: Cannot read property 'id' of undefined

Any ideas?

I have also tried:

export default compose(
    graphql(getCompany,
        { skip: (props) => !props.location.state },
        { options: (props) => ( { variables: { id: props.location.state.id } } ) }
    )
)(withApollo(CreateCompany));

query:

    query getCompany($id: ID!) {
        getCompany(id: $id) {
            id
            index
            enabled
            name
            email
            address
            zip
            phone
            notes
            users {
                id,
                index,
                name,
                surname,
                email
            }
            area {
                id
                index
                name
                country {
                    id
                    name
                }
            }
            tax_office {
                id
                index
                name
            }
            activity {
                id
                index
                name
            }
            contacts {
                id
                index
                job_title {
                    id
                }
                title {
                    id
                }
                name
                office_phone
                office_fax
                mobile
                emergency_phone
                email
            }
            trading_name
            tax_code
            created_at
        }
    }

Version

• [email protected]
• [email protected]

[YannisMarios]

This finally worked for me:

export default compose(
    graphql(getCompany,
        {
            skip: (props) => !props.location.state,
            options: (props) => ( { variables: { id: props.location.state.id } } )
        }
    )
)(withApollo(CreateCompany));

[galvanu]

Looks like this changes related to the newer version of apollo, we had the same issue after apollo client upgrade. After moving 'skip' out of 'options' object all works.

[7yp0]

Looks like the issue here is that since 2.2.0 data is set to undefined when skip property is set: https://github.com/apollographql/react-apollo/pull/1916/files?utf8=%E2%9C%93&diff=unified#diff-45a733ae4e94396f8fa0947302418680R366

I created a pull request for this: https://github.com/apollographql/react-apollo/pull/2628

Also this may be related too: #2492

[rocketraman]

I started encountering this issue at 2.2.0 as well. Before that, if skip was true, the Query function was executed loading===true and empty data. With recent versions, when skip===true, the Query function executes with loading===false and data===undefined (the actual GraphQL call to the server is still skipped).

[danilobuerger]

This is working as expected. data is either TData or undefined. Since we are skipping, data is set to undefined.

See also comment in source:

    // When skipping a query (ie. we're not querying for data but still want
    // to render children), make sure the `data` is cleared out and
    // `loading` is set to `false` (since we aren't loading anything).

[jasonwr]

This is working as expected. data is either TData or undefined. Since we are skipping, data is set to undefined.

See also comment in source:

    // When skipping a query (ie. we're not querying for data but still want
    // to render children), make sure the `data` is cleared out and
    // `loading` is set to `false` (since we aren't loading anything).

@danilobuerger this isn't a good approach. What if you have a skip for certain scenarios and want your data reloaded in from the cache? I shouldn't have to create a copy of the data for each quarry.

[Aarthysekar]

Moving skip out of options will work.
I want to decide skipping based on the redux property and the below worked for me. We can even skip one query if we have multiple queries to be fetched in a component.
Note: I use flowRight (from lodash.flowright) since latest apollo-boost doesn't have compose.

const mapStateToProps = (state) => {
const {
currentPage
} = state.PageStore;
return {
currentPage
};
};

export default connect(mapStateToProps)(
flowright(
graphql(SAMPLE_GQL, {
name: 'sampleData'
}),
graphql(DYNAMIC_GQL, {
name: 'dynamicData',
skip: ({ currentPage }) => currentPage !== 'page1',
options: () => ({
fetchPolicy: 'network-only'
})
})
)(SampleComponent));