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

Question

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

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

post.js 的 return 值如下：

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 到 index.js 的变量 Limit 任何解决方案如何做到这一点？

Answer 1

将您的查询定义为附加到全局 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 将更改名称。

Answer 2

你听说过 sessionStorage 吗？

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

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

How to pass variable from one file of JS to a query present in other file?

javascript

graphql

graphql-js

如何将变量从一个 JS 文件传递​​到另一个文件中的查询？

How to pass variable from one file of JS to a query present in other file?

javascript

graphql

graphql-js

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