Graphql cache DataIdFromObject не вызывает повторную визуализацию React

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

// --- компонент React

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

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

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

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

Что я вижу?

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

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

Как вы атакуете обработчики onSubmit и oncLick?

Andrew Ingram 25.06.2018 14:16

стрелочные функции. Функция вызывается. Не думаю, что это будет проблемой.

leogoesger 25.06.2018 20:06

@AndrewIngram обновлен!

leogoesger 25.06.2018 20:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
251
1

Ответы 1

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

менять:

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

к:

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

стрелочные функции привязываются к области видимости. es6

leogoesger 27.06.2018 20:05

и прочтите, пожалуйста, вопрос, там написано, что работает на одну кнопку. Проблема связана с графическим файлом refetch.

leogoesger 27.06.2018 20:06

Другие вопросы по теме