Question

考虑使用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);

任何帮助表示赞赏！

使用阿波罗缓存查询而不是查询服务器来对GraphQL进行反应

0 个答案: