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

发布时间：2020-12-15 05:06:59 所属栏目：百科来源：网络整理

导读：如果我在我的应用程序中使用redux和apollo客户端,那么从组件外部的操作触发查询的最佳方法是什么. 例如,如果我有一个标准应用程序,配置了redux和apollo客户端,我应该如何触发“刷新”列表.我可以在具有gql的组件本身上触发一个函数,但是如何从一个更符合flux

如果我在我的应用程序中使用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查询.

我需要在我的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
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!