кэш DataGDFromObject в GraphQl, не вызывающий повторную визуализацию React - PullRequest
Новая
       7

кэш DataGDFromObject в GraphQl, не вызывающий повторную визуализацию React

0 голосов
/ 25 июня 2018

У меня есть две мутации onLike и onSubmit, определенные в одном компоненте реакции. Для мутации onLike я могу использовать кэш с DataIdFromObject для обновления данных без повторной загрузки данных либо с this.props.data.refetch(), либо с refetchQueries: []. НО не для onSubmit мутации.

// --- Реагирующий компонент 

onSubmit(e) {
    e.preventDefault();
    this.props
        .addLyricQuery({
            variables: {
                content: this.state.content,
                songId: this.props.params.id,
            },
        });
}

onLike(id, likes) {
    this.props.likeLyricQuery({
        variables: { id },
        optimisticResponse: {
            __typename: "Mutation",
            likeLyric: {
                id,
                __typename: "LyricType",
                likes: likes + 1,
            },
        },
    });
}

<button onClick={() => this.onLike(lyric.id, lyric.likes)}>

<button onClick={e => this.onSubmit(e)}>Submit</button>

// --- apollo connect 

const enhancer = compose(
    graphql(fetchSongQuery, {
        options: props => ({
            variables: {
                id: props.params.id,
            },
        }),
    }),
    graphql(addLyricQuery, { name: "addLyricQuery" }),
    graphql(likeLyricQuery, { name: "likeLyricQuery" })
);
export default enhancer(SongDetail);

// --- addLyric Query 

import gql from "graphql-tag";

export default gql`
    mutation AddLyricToSong($content: String, $songId: ID) {
        addLyricToSong(content: $content, songId: $songId) {
            id
            title
            lyrics {
                id
                content
            }
        }
    }
`;

// --- как запрос 

import gql from "graphql-tag";

export default gql`
    mutation LikeLyric($id: ID!) {
        likeLyric(id: $id) {
            id
            likes
            content
        }
    }
`;

// --- apollo store 

const client = new ApolloClient({
    dataIdFromObject: o => o.id
});

Что я ожидаю увидеть?

Я ожидаю, что поведение между onSubmit и onLike будет таким же. Поэтому, когда я нажимаю на любую кнопку, она должна запрашивать только один раз, без необходимости повторного получения данных.

Что я вижу?

onLike работает как положено. При щелчке он вызывает только одну мутацию, и компонент реакции отображается немедленно.

onSubmit выводит меня на пустую страницу, затем, когда я обновляю страницу, отображаются новые данные. Я могу заставить его работать, используя refetch или refetchQueries: [], но это не имеет значения.

1 Ответ

0 голосов
/ 27 июня 2018

Контекст функции onSubmit не связан, и поэтому вы не препятствует поведению формы по умолчанию

изменение: 

<button onClick={e => this.onSubmit(e)}>Submit</button>

до: 

<button onClick={this.onSubmit.bind(this)}>Submit</button>
...