考虑使用Graphql从reactJS应用程序到rails后端的查询,例如:

import { gql } from 'react-apollo';

const heroesListQuery = gql`
    query HeroesQuery {
       heroes {
            name     
        }
   }
`;

export default heroListQuery;

让我们假设它返回一个名为'foo'和'bar'的2个英雄列表 . 然后,让我们想象一下,我在后端改变了我的第二个英雄名字,比如'baz' . 当我继续这个查询时,我的客户端仍然返回'foo'和'bar',甚至没有再次调用服务器 . 我相信是由于一些缓解“反应 - 阿波罗”的机制 .

实现它的唯一方法是将 hero 键更改为 somethingElse 因为我无法弄清楚如何清理商店缓存,这对开发来说很痛苦 . 我一直在阅读,有可能清除apollo缓存,以便每次都使用新的内存缓存,但还没弄明白如何 . 这是我到目前为止在 setup.js 文件中尝试的内容:

const networkInterface = createNetworkInterface({
  uri: '/graphql'
});

networkInterface.use([{
  applyMiddleware: addAuthorizationHeaderToRequest
}]);

const defaultOptions = {
  watchQuery: {
    fetchPolicy: 'network-only',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'network-only',
    errorPolicy: 'all',
  },
}

const apolloClient = new ApolloClient({
  networkInterface: networkInterface,
  defaultOptions: defaultOptions
});

我可能对这项技术应该如何工作有一个很好的理解,因为我还在试验它,但我相信这将是一种防止缓存查询的简单机制 .

Edit1:他是我如何使用我的查询(假设每次都应该进行新的查询):

在客户端,为了保持组织有序,我使用3个文件来呈现此艺术家列表:

首先, HeroesSchema.js

import { gql } from 'react-apollo';

const heroesListQuery = gql`
    {
        query {
            heroes {
                name
            }
        }
    }
`;

export default heroesListQuery;

然后, Hero.js

import React, { Component } from 'react';

class Hero extends Component {
    render() {
        return (
            <tr>
                <td>{this.props.data.name}</td>
            </tr>
        );
    }
}

export default Hero;

最后,将这两个包装在一个更大的布局中: Heroes.jsx

import React, { Component } from 'react';
import {graphql} from 'react-apollo';
import Hero from './Hero';
import heroesListQuery from './HeroesSchema';

class Heroes extends Component {
    render() {
        if(this.props.data.loading) {
            return (<p>Loading</p>)
        } else {

            const HeroesItems = this.props.data.heroes.map((data,i) => {
                return (<Hero key={i} index={i} data={data}></Hero>);
            });
            return (
                <div>
                    <h1>Heroes</h1>
                    <table className="table table-striped table">
                        <thead>
                        <tr>
                            <th>Name</th>
                        </tr>
                        </thead>
                        <tbody>
                        { HeroesItems }
                        </tbody>
                    </table>
                </div>
            );
        }

    }
}

export default graphql(heroListQuery)(Heroes);

任何帮助赞赏!