9

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

例如，如果我有一个标准应用程序，配置了 redux 和 apollo 客户端，我应该如何触发“刷新”列表。我可以在具有 gql 的组件本身上触发一个函数，但是我将如何通过一个更符合通量的操作来执行它。

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 查询。

4

2 回答 2

2

我需要在我的 actions.js 中使用 ApolloClient。例如

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
});
于 2017-06-07T14:59:59.340 回答
0

我看到了你的需求，因为我几天前刚在你的地方。

可悲的消息是：如果您想使用带有 的动作graphQL，那么您不应该使用apollo，直接使用graphQL即可。这是一篇非常好的文章，可以引导您完成 - Redux 和 GraphQL 入门。为什么？因为 Apollo 使用了一个qraphql(query)调用它自己的动作的函数。

两者如何以非常简单的方式工作Redux。Apollo

  • Redux：（用户调度一个动作）ActionCreator --> Action --> Middleware --> reducer --> store --> 绑定数据到用户props。我们手动控制每个状态。

  • Apollo：（用户将查询/突变传递给graphql(query)）所有隐藏的（操作->存储）然后将数据绑定到用户道具。

如果你正在使用 Apollo，你可以说它取代了 Redux graphql，因为它与 react 和graphQL.

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

我知道感觉就像你正在失去 redux，但你会通过更多的异步请求和缓存来处理 Apollo，从而获得所有优势。

如果你需要一个地方来启动react-redux-apollo。

于 2017-06-06T23:58:27.043 回答