时间戳

首页 > 解决方案 > GQL 不会自动调用查询

reactjs - GQL 不会自动调用查询

问题描述

我有两个组件如下

歌曲列表.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没有被调用？

标签： reactjsreact-routergraphqlapolloreact-apollo

解决方案

您需要在突变结果和查询结果上查询相同的字段。这样，apollo 的内部缓存将相应更新（参见文档部分）

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

我还建议您使用chrome 扩展来查看 apollo 缓存

推荐阅读