Question

如果我在我的应用程序中使用redux和apollo客户端，那么从组件外部的操作触发查询的最佳方法是什么。

例如，如果我有一个标准应用程序，配置了redux和apollo客户端，我该如何触发“刷新”列表。我可以在具有gql的组件本身上触发一个函数，但是我如何从一个更符合flux的动作中做到这一点。

import React, { Component, PropTypes } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { connect } from 'react-redux';
import { refreshProfile } from './actions';

class Profile extends Component { ... }
Profile.propTypes = {
  data: PropTypes.shape({
    loading: PropTypes.bool.isRequired,
    user: PropTypes.object,
  }).isRequired,
};

const UserQuery = gql`
  query getUser {
    user {
      id
      name
    }
  }
`;

const ProfileWithData = graphql(UserQuery)(Profile); 
const ProfileWithDataAndState = connect(
 (state) => ({ user: state.user })),
 )(ProfileWithData);

而且，我想要触发一个动作来刷新用户数据？由于逻辑在组件本身，我不知道如何从动作本身触发gql查询。

Answer 1

我需要在我的actions.js中使用ApolloClient。 e.g。

import ApolloClient, { createNetworkInterface } from 'apollo-client';
const networkInterface = createNetworkInterface({
  uri: config.graphCoolUri,
});

const client = new ApolloClient({
  networkInterface,
  dataIdFromObject: r => r.id,
});

const { data } = await client.query({
   query: UserQuery
});

Answer 2

我看到了你的需求，因为几天前我就在你的位置。

令人遗憾的是：如果您想对graphQL使用操作，那么您不应该使用apollo，只需直接使用graphQL即可。这是一篇非常好的文章，引导您完成 - getting started with Redux and GraphQL。为什么？因为Apollo使用一个名为qraphql(query)的函数来调用它自己的动作。

Redux和Apollo如何以非常简单的方式运作。

Redux :(用户调度动作）ActionCreator - ＆gt;行动 - ＆gt;中间件 - ＆gt;减速机 - ＆gt;商店 - ＆gt;将数据绑定到用户道具。我们手动控制每个州。
Apollo :(用户将查询/变异传递给graphql(query)）所有隐藏（action - ＆gt; store）然后将数据绑定到用户道具。

如果你使用graphql，你可以说Apollo取代了Redux，因为它与react和graphQL有更好的集成。

与此同时，由于Apollo仍处于开发阶段，您可能需要redux for redux-form等等。如果你习惯了一些redux库，你可以考虑继续使用除Apollo之外的redux，你仍然可以绑定它们的存储并添加可能适用于两者的服务中间件，但你可能不会通过Apollo使用Redux动作获取数据

我知道你感觉自己正在减少redux，但是你可以通过更多的异步请求和使用Apollo进行缓存来获得所有优势。

如果你需要一个地方开始react-redux-apollo。

如何从redux操作调用apollo客户端查询

2 个答案: