React-apollo: [Batching] Can't find field X on result object ROOT_QUERY. when activating batching with two queries on the same component

[rricard]

I have two different queries connected to a same component and use fragments, let's say:

const CompWithData = connect({
  mapQueriesToProps: () => ({
    q1: {query: gql`{ ...FragmentWithField1 }`, fragments: fField1, pollInterval: 30000}, // in my setup, I'm polling but this may not do anything
    q2: {query: gql`{ field2 }`},
  }),
})(Comp);

This works perfectly well usually, but if I activate query batching on the apollo client, things start to go bad:

I will get an error like this without a stack, completely crashing redux: Can't find field field1 on result object ROOT_QUERY.

Here is what my redux devtool looks like:

After that, redux is just unusable...

I don't know if it's react-apollo or apollo-client that's triggering this but this is the setup that triggers that for me.

EDIT I have both latest versions for react-apollo and apollo-client
Added some fragments since it is closer to what I actually have

[jbaxleyiii]

@rricard the latest version of react Apollo doesn't have connect. Although this sounds more like an apollo-client bug

[rricard]

@jbaxleyiii I managed to upgrade to the latest version and my connect calls were still working, either a cache was left either there is still the deprecated method. However, I think there is still an issue with batching and having two queries on the same component.

[rricard]

It seems linked to apollo-client but I have hard time reproducing this situation there and only there.

[voodooattack]

@jbaxleyiii If it's any help: I've noticed that this only happens with fragments and batching enabled in my case. When I remove fragments from the query everything works.

I'm using react-apollo: 0.4.5 and apollo-client: 0.4.11.

[rricard]

@voodooattack yup, thank you for the precision, I'm in the same situation...

[crubier]

I am not using fragments nor batching but I have the same problem here with react-apollo: 0.4.5 and apollo-client: 0.4.11.

[rricard]

@jbaxleyiii I'll try to work on that once I manage to upgrade to 0.4.x, even if it's triggered by the apollo-client, I need to have the latest setup to clearly assess this.

[jbaxleyiii]

@rricard @crubier I think this was fixed with https://github.com/apollostack/apollo-client/pull/509

Can you confirm?

[rricard]

@jbaxleyiii I'm migrating to the latest react-apollo today, will tell you if it does, thanks!

EDIT: maybe I'll just try to upgrade the client first!

[rricard]

Doesn't work just yet with

• apollo-client 0.4.12
• react-apollo 0.3.20

I'll now try to upgrade react-apollo

[jbaxleyiii]

@rricard dang

[rricard]

@jbaxleyiii lemme try more stuff, if that doesn't work, I may come back with more diagnosis info and if I have time, I'll try to fix it by debugging it myself inside the apollo code and maybe provide a patch.

[rricard]

but I think I'll have to come up with a test case if I want that fixed, and while I'll be at it, let's just do the fix too!

[rricard]

@jbaxleyiii the migration to the newest react-apollo is not trivial, it'll take time

[jbaxleyiii]

@rricard I totally understand! We are still migrating ourselves

[crubier]

Still not working, with the last versions. Here is a minimal example:

// Create network interface
const networkInterface = createNetworkInterface('/graphql');

const client = new ApolloClient({
    networkInterface: networkInterface,
    //  initialState: window.__APOLLO_CONTEXT__ // If we use server-side rendering in the future, see http://docs.apollostack.com/apollo-client/#store-rehydration
});


// The redux reducer is created by combining the Apollo one with custom ones
const store = createStore(combineReducers({
    redux: myReducer, // A custom reducer
    apollo: client.reducer(), // The apollo reducer
}), applyMiddleware(client.middleware()));




/////////////////////////////////////////////////////////////////////
// Use the client directly
// THIS WORKS
// async function test() {
//     let res = await client.query({query: gql `
//     {
//       user {
//         firstName,
//         lastName
//       }
//     }`});
//     console.log('Query ', res);
//     let res2 = await client.mutate({
//         mutation: gql `
//       mutation modifyTheUser($firstName: String!, $lastName: String!) {
//         modifyUser(firstName: $firstName, lastName: $lastName) {
//           firstName
//           lastName
//       }
//     }`,
//         variables: {
//             firstName: "Bobbie",
//             lastName: "Joe"
//         }
//     });
//     console.log('Mutation ', res2);
// }
// test();



/////////////////////////////////////////////////////////////////////
// For graphql
// Down
const myQuery = gql `
  query getUser {
    user {
      firstName,
      lastName
    }
  }
`;
const MyComponentWithQuery = graphql(myQuery, {
    props: ({ownProps, data}) => {
        if (data.loading)
            return {userLoading: true};
        if (data.error)
            return {hasErrors: true};
        return {user: data.user, refetchUser: data.refetch};
    }
})(MyComponent);
// Up
const myMutation = gql `
  mutation modifyTheUser($firstName: String!, $lastName: String!) {
    modifyUser(firstName: $firstName, lastName: $lastName) {
      firstName
      lastName
    }
  }
`;
const MyComponentWithMutation = graphql(myMutation, {
    props: ({ownProps, mutate}) => ({
        async onMyMutationTriggered() {
            try {
                console.log("Triggered", ownProps);
                let {data} = await mutate({
                    variables: {
                        firstName: "Bobbie",
                        lastName: "Joe"
                    },
                    optimisticResponse: {
                        firstName: "Bobbie",
                        lastName: "Joe"
                    }
                });
                console.log("Success", data);
            } catch (error) {
                console.log("Error", error);
            }
        }
    })
})(MyComponentWithQuery);



/////////////////////////////////////////////////////////////////////
// For redux
// Down
const mapStateToProps = (state) => ({count: state.redux.counter});
// Up
const mapDispatchToProps = (dispatch) => {
    return {
        onIncrementButtonClicked: () => {
            dispatch(increment(2))
        }
    }
}
// Apply  redux to the component
const MyComponentWithData = connect(mapStateToProps, mapDispatchToProps)(MyComponentWithMutation);

/////////////////////////////////////////////////////////////////////
// Render everything
render(
    <ApolloProvider store={store} client={client}>
      <MyComponentWithData/>
    </ApolloProvider>,
 document.getElementById("root"))

I get the error: "Can't find field modifyUser on result object ROOT_MUTATION."

[rricard]

@jbaxleyiii I'm not sure but it has been a few days I'm waiting for one of my PRs to be published in the latest client. Look at the changelog there, the fix you are talking about may still be scheduled for vNext...

[msimulcik]

@crubier, I had similar problem and in my case it was caused by optimisticResponse. Try your example with modified optimisticResponse object:

optimisticResponse: {
    modifyUser: {
        firstName: "Bobbie",
        lastName: "Joe"
    }
}

[crubier]

@msimulcik Thank you so much, you are absolutely right !

@jbaxleyiii You can forget about my last messages, the problem is solved on my side !

Thank you very much every one, and sorry for polluting this thread.

[rricard]

@jbaxleyiii will retry once https://github.com/apollostack/apollo-client/pull/584 is merged (this PR covers a bug that breaks my batching anyway!)

I have finished migrating to the latest API btw 😉 . I still have some concerns and will put them in a proper Issue.

[jbaxleyiii]

@rricard is this still an issue?

[rricard]

@jbaxleyiii oh! Need to check! Had a lot of stuff going on, will try now!

[jbaxleyiii]

@rricard any updates on this?

[rricard]

@jbaxleyiii : Good question, last time I tried, I had issues with something else. I'll just close this one and reopen one if I still get issues. Thanks!