У меня есть две мутации 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: [], но это не главное.
стрелочные функции. Функция вызывается. Не думаю, что это будет проблемой.
@AndrewIngram обновлен!





Контекст функции onSubmit не привязан, поэтому вы не предотвращаете поведение формы по умолчанию.
менять:
<button onClick = {e => this.onSubmit(e)}>Submit</button>
к:
<button onClick = {this.onSubmit.bind(this)}>Submit</button>
стрелочные функции привязываются к области видимости. es6
и прочтите, пожалуйста, вопрос, там написано, что работает на одну кнопку. Проблема связана с графическим файлом refetch.
Как вы атакуете обработчики onSubmit и oncLick?