Query strange behavior - unlimited loading state after success mutation

[ARMGAMES]

I have a simple react component that connect to graphql query and all works fine untill i add new element to my db with mutation.

my simple react component - SpeakerList

import React from 'react';
import { graphql } from 'react-apollo';

import { QuerySpeakerList } from '../../../redux/graphql/querys';

import SpeakerListItem from './SpeakerListItem';

class SpeakerList extends React.Component {
    render( ) {
        const { loading } = this.props.data;

        console.log('SpeakerList', this.props.data);

        if (loading)
            return (
                <h1>Loading</h1>
            )

        return (
            <h1>do stuff</h1>
        )
    }
}

SpeakerList.propTypes = {
    data: React.PropTypes.object.isRequired
};

export default graphql(QuerySpeakerList)(SpeakerList);

I add new element with modal window that i make with component that i connect with that.

const Query = graphql(QuerySpeakerList, { name: 'Speakers' });
const Mutation = graphql(MutationAddSpeaker, {
    name: 'addSpeaker',
    options: {
        updateQueries: {
            Speakers: (prev, { mutationResult, queryVariables }) => {
                return {
                    speakers: [
                        ...prev.speakers,
                        mutationResult.data.addSpeaker
                    ]
                }
            }
        }
    }
});

export default compose( Query, Mutation )( AddSpeaker );

Mutation works fine even updateQueries runs and adding new element to array, but when i close modal window i has my Query element at unlimited loading state. I show that at screenshot.

QuerySpeakerList

export const QuerySpeakerList = gql `
    query Speakers{
        speakers {
            ...speakerInfo
        }
    }
    ${SpeakerFragment}
`;

SpeakerFragment

export const SpeakerFragment = gql `
    fragment speakerInfo on Speaker {
        id
        url
        body
        name
        avatar
        description
        likes {
            id
        }
        comments{
            id
        }
        courses {
            id
        }
    }
`;

MutationAddSpeaker

export const MutationAddSpeaker = gql `
    mutation addSpeaker($name: String!, $url: String!, $avatar: String!, $description: String!, $body: String!){
        addSpeaker(name: $name, url: $url, avatar: $avatar, description: $description, body: $body){
            id
            url
            name
            avatar
            description
            body
        }
    }
`;

What i do wrong?

Version

• [email protected]
• [email protected]

[ARMGAMES]

I think i have same issue with #361

[ARMGAMES]

Any ideas?

[helfer]

@ARMGAMES this looks like it could be a bug in apollo-client. Would you mind opening the issue there and make sure it occurs with the latest version of apollo-client? (it probably does)

[jbuchermn]

I'm currently battling, I think, the same issue.

Could you try querying the whole SpeakerFragment in your mutation? Like

mutation addSpeaker($name: String!, $url: String!, $avatar: String!, $description: String!, $body: String!) { addSpeaker(name: $name, url: $url, avatar: $avatar, description: $description, body: $body){ ...speakerInfo } } ${SpeakerFragment}

This worked for me, at least apollo-client didn't crash anymore. I don't consider this a fix though, since querying partial information here should be possible.

[ARMGAMES]

Created issue at apollo - apollographql/apollo-client#1039

[SachaG]

I'm also encountering weird behaviors around the loading state. It often gets stuck to true or false when it shouldn't.

[SachaG]

@jbuchermn I can confirm that the problem comes from using partial fragments and is fixed by using the entire fragment. To clarify, I'm using a reducer to optimistically insert the results from a new mutation.

When the new mutation returns a partial fragment (compared to the other documents in the list which were previously loaded from the server), the reducer's return value is never passed to the returned props and data.loading is set to true indefinitely.

When the new mutation returns a full fragment, everything works properly.

[helfer]

Closing this issue now that we're tracking it in apollographql/apollo-client#1039