如何将变量从一个JS文件传递给另一个文件中的查询？答案

【问题标题】：How to pass variable from one file of JS to a query present in other file?如何将变量从一个JS文件传递给另一个文件中的查询？
【发布时间】：2018-06-23 15:40:16
【问题描述】：

我的工作 index.js 和 post.js 中有 2 个文件 index.js 文件的 graphql 查询如下。

export const query = graphql`
 query IndexPageQuery($Limit: Int) {
  allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}, limit: $Limit) {
  totalCount`}}

post.js 的返回值如下：

return(          
  <div className={`all-posts ${this.props.featured ? 'featured' : ''}`}>
  <h3 className="sidebar-heading"> More Posts </h3> 
    {this.props.posts.map(({ node }) => (
    <div className="post" key={node.id}>
    <Link
        to={node.fields.slug}
        css={{ textDecoration: `none`, color: `inherit` }}
      >
      <div>
      <p>
        {node.frontmatter.title}{" "}
      </p>
      <span>— {node.frontmatter.date}</span>
      </div>
    </Link>
    </div>
  ))}

现在我无法将值从 post.js 传递给变量 Limit 到 index.js 有什么解决办法吗？？

【问题讨论】：

如果您使用 webpack，请将查询变量设置为全局，例如 global.query = query; 希望对您有所帮助
@JagjeetSingh 不；实际上，我在问如何在 post.js 中设置变量的值，以便它在 index.js 的查询中呈现
您可以在 post.js 文件中使用 import，例如 import index from './index.js' 并使用 index.query

标签： javascript graphql graphql-js

【解决方案1】：

你听说过sessionStorage 吗？

您可以将数据保存在键/值对中并在您想要的任何地方读取。

【讨论】：

【解决方案2】：

将您的查询定义为附加到全局window 对象的对象，如下所示：

window['query'] = graphql`
  query IndexPageQuery($Limit: Int) {
  allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}, limit: $Limit) {
  totalCount`}};

然后，确保在任何依赖于查询变量的文件之前加载初始化此变量的任何文件。您可以像这样访问它：window.query。

例如，如果您在 index.js 中定义查询，请确保在加载 post.js 或任何其他依赖于此查询的 js 文件之前加载 index.js。（除非您有 IIFE 但避免任何意外的未定义问题，否则并非总是必要的）

注意：我在 window 对象上定义查询的原因如下：window['query'] = query 而不是 window.query = query 是因为 webpack 不会更改对象键名。如果你像window.query = query 那样定义它，webpack 会更改名称。

【讨论】：