使用Apollo Client动态设置React组件的GraphQL查询 [英] Dynamically set GraphQL queries for React components with Apollo Client

问题描述

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

I'm building a React front end which allows users to select an "active" query from a list of static queries and flattens to the result to be displayed in a table. What is the best way to pass the GraphQL query from a higher-order component into a nested child component?

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

Most of the documentation/solutions that I've seen focus on binding a static query with dynamical conditions from component states to a component, which would not work for my purpose as the different static queries have varying fields and query different node types.

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

What is the best-practice/recommended approach here? I feel like this is not a very unique use case, but I can't seem to find any examples that would do something similar.

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

I'm using Apollo-Client/Redux as my client-side store.

下面是组件的大致轮廓:

Below is the rough outline of the component:

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
  };
}

推荐答案

让我们以以下组件为例:

Let's take, for example, the following component:

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);
}

然后您将像这样使用它:

You would then use it like this:

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.* (取决于根查询)，您可以处理视内容而定.

Of course, your Profile would not received props.data.currentUser, rather it would be props.data.* depending on the root queries, and you would handle it appropriately depending on the contents.

注意:这是直接在Stack Overflow中编写的，因此，如果您遇到任何问题-lmk，我会解决.

Note: this was written directly in Stack Overflow, so if you encounter any problems - lmk and I'll fix it.

这篇关于使用Apollo Client动态设置React组件的GraphQL查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！