使用Apollo Client动态设置React组件的GraphQL查询

小编典典

使用Apollo Client动态设置React组件的GraphQL查询

reactjs

我正在构建一个React前端，允许用户从静态查询列表中选择一个“活动”查询，并将其展平到要显示在表中的结果。将GraphQL查询从高阶组件传递到嵌套子组件的最佳方法是什么？

我见过的大多数文档/解决方案都集中于将具有动态条件的静态查询从组件状态绑定到组件，这对于我的目的不起作用，因为不同的静态查询具有不同的字段和查询不同的节点类型。

什么是最佳实践/推荐方法？我觉得这不是一个非常独特的用例，但是我似乎找不到任何可以做类似事情的示例。

我将Apollo-Client / Redux用作客户端存储。

下面是该组件的粗略概述：

class GridViewPage extends React.Component{

  constructor(props, context) {

    super(props, context);

    this.state = {

      activeQuery = ... Stores the selected query ...

    };

  }



  render() {

    return (

      <div className="gridContainer">

        ...Component here allows users to select a query from the active list and saves it/it's ID/Index to the state...



        <Panel collapsible>

        ...Some toolbar components...

        </Panel>

        ...Component here displays the result of the query (Ideally by receiving the query or the result of as a prop?)...

      </div>

    );

  }

}



GridViewPage.propTypes = {

  grids: PropTypes.array.isRequired,

  actions: PropTypes.object.isRequired

};



function mapStateToProps(state, ownProps) {

  return {

      // Receives list of available queries as a prop

      grids: state.grids

  };

}

阅读 445

2020-07-22

共1个答案

小编典典

让我们以以下组件为例：

ProfileWithData.js

import React, { Component, PropTypes } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

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

// We use the gql tag to parse our query string into a query document
const CurrentUserForLayout = gql`
  query CurrentUserForLayout {
    currentUser {
      login
      avatar_url
    }
  }
`;

const ProfileWithData = graphql(CurrentUserForLayout)(Profile);

用更高阶的组件将其包装起来非常容易：

Profile.js

import React, { Component, PropTypes } from 'react';

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

createProfileWithData.js

import React, { Component, PropTypes } from 'react';
import { graphql } from 'react-apollo';
import { Profile } from './Profile'

export default function createProfileWithData(query) => {
  return graphql(query)(Profile);
}

然后，您可以像这样使用它：

Page.js

import React, { Component, PropTypes } from 'react';
import gql from 'graphql-tag';
import createProfileWithData from './createProfileWithData';

class Page extends Component {

  renderProfileWithData() {

      const { textQuery } = this.props;
      // Simplest way, though you can call gql as a function too
      const graphQLQuery = gql`${textQuery}`;

      const profileWithDataType = createProfileWithData(graphQLQuery);

      return (
        <profileWithDataType />
      );
  }

  render() {

    return (<div>
                ..
                {this.renderProfileWithData()}
                ..
           </div>)
  }

}

Profile.propTypes = {
  textQuery: PropTypes.string.isRequired,
};

我认为你说对了。

当然，不会收到您的个人资料props.data.currentUser，而是props.data.*取决于根查询，并且您将根据内容进行适当的处理。

注意：这是直接在Stack Overflow中编写的，因此，如果您遇到任何问题-lmk，我会修复它。

2020-07-22