ReactJS/Graphql：如何导出查询以在另一个组件中使用？答案

【问题标题】：ReactJS/Graphql: How to export the query to use in another component?ReactJS/Graphql：如何导出查询以在另一个组件中使用？
【发布时间】：2018-08-01 04:26:16
【问题描述】：

对于该项目的下一阶段，我需要导出查询，以便可以使用查询变量从另一个组件调用它。我看到的所有示例都没有使用或'query ='，所以我迷失了导出查询的语法语句。任何帮助将不胜感激。

const UserList = (props) => (
  <Query
    query={gql` 
      query action($timestamp: Float! ){
        action(timestamp: $timestamp){
        action
        timestamp
        object{
          filename
        }
      }
    }
`}

  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error</p>;

          return (    
            <Item.Group divided>
              {data.action.map(action =>
                <div>
                  <ul>
                  <li>{action.action}</li>
                  <li>{action.timestamp}</li>
                  <ul>
                  {action.object.map( (obj) => {
                    return (<li>{obj.filename}</li>)
                  })}
                  </ul>
                  </ul>
                </div>
              )}
              </Item.Group>
            );
        }}
  </Query>
);

export default (UserList);

【问题讨论】：

标签： reactjs graphql

【解决方案1】：

export const n6dynQuery = gql`
      query action($timestamp: Float! ){
        action(timestamp: $timestamp){
        action
        timestamp
        object{
          filename
        }
      }
    }`

在组件中使用它：-

import {n6dynQuery} from "filepath"
const UserList = (props) => (
  <Query query={n6dynQuery} >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error</p>;

          return (

            <Item.Group divided>
              {data.action.map(action =>
                <div>
                  <ul>
                  <li>{action.action}</li>
                  <li>{action.timestamp}</li>
                  <ul>
                  {action.object.map( (obj) => {
                    return (<li>{obj.filename}</li>)
                  })}
                  </ul>
                  </ul>
                </div>
              )}

              </Item.Group>
            );
        }}
  </Query>
);

export default (UserList);

【讨论】：

感谢您的建议。稍后我会尝试并告诉你进展如何。
不确定如何实现。我需要在按下提交按钮后调用查询，并根据数据的响应更新显示。从提交按钮调用查询的语法是什么？