考虑使用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);
任何帮助赞赏!