GQL не вызывает автоматически запрос - PullRequest
Новая
       20

GQL не вызывает автоматически запрос

0 голосов
/ 08 сентября 2018

У меня есть два компонента, как показано ниже

SongList.js 

import React, { Component } from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import { Link } from 'react-router';

class SongList extends Component {
  renderSongs() {
    return this.props.data.songs.map(song => {
      return (
        <li key={song.id} className="collection-item">
          {song.title}
        </li>
      );
    });
  }
  render() {
    if (this.props.data.loading) {
      return <div>Loading...</div>;
    }
    return (
      <div>
        <ul className="collection">
          {this.renderSongs()}
        </ul>
        <Link 
          to="/songs/new"
          className="btn-floating btn-large red right"
        >
          <i className="material-icons">add</i>
        </Link>
      </div>
    );
  }
}

const query = gql`
  {
    songs {
      id,
      title
    }
  }
`;

export default graphql(query)(SongList);

SongCreate.js 

import React, { Component } from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import { Link, hashHistory } from 'react-router';

class SongCreate extends Component {
  constructor(props) {
    super(props);

    this.state = { title: '' }
  }

  onSubmit(event) {
    event.preventDefault();

    this.props.mutate({
      variables: {
        title: this.state.title
      }
    }).then(() => hashHistory.push('/'));
    // .catch((err) => console.log('DEBUG::err', err));

  }
  render() {
    return (
      <div>
        <Link to="/">
          Back
        </Link>
        <h3>Create a New Song</h3>
        <form onSubmit={this.onSubmit.bind(this)}>
          <label>Song Title: </label>
          <input 
            onChange={event => this.setState({ title: event.target.value })}
            value={this.state.title}
          />
        </form>
      </div>
    );
  }
}

const mutation = gql`
  mutation AddSong($title: String){
    addSong(title: $title) {
      title
    }
  }
`;

export default graphql(mutation)(SongCreate);

В основном ситуация, с которой я сталкиваюсь, заключается в том, что в компоненте SongCreate после успешного изменения метода addSong он вернется к SongList, однако я не вижу новую песню на SongList, ичтобы я это увидел, мне нужно обновить страницу.Мне кажется, что запрос на SongList не вызывается?

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

Похоже, что по причине того, что запрос был выполнен один раз, и когда вы добавляете новый элемент и возвращаетесь на страницу со списком, запрос не будет перезапущен из-за кэширования. Таким образом, чтобы исправить это, мы можем повторно запросить. В компоненте SongCreate мы можем определить refetchQueries в пределах mutate, как показано ниже: 

this.props.mutate({
      variables: {
        title: this.state.title
      },
      refetchQueries: [{ query: gql`.........` }] //<======
    }).then(() => hashHistory.push('/'));
0 голосов
/ 08 сентября 2018

Вам необходимо запросить одинаковые поля результатов мутации и результатов запроса.Таким образом, внутренний кэш apollo будет соответствующим образом обновлен ( см. Раздел документации ) 

const mutation = gql`
  mutation AddSong($title: String){
    addSong(title: $title) {
      id         <==== Added this to match the query 
      title
    }
  }
`;

Я также предлагаю вам поиграться с расширением chrome допросмотреть кеш аполлона

...