Как передать переменную из одного файла JS в запрос, присутствующий в другом файле?
В моей работе есть 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(
<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>
))}
Теперь я не могу передать значение переменной Limit из post.js в index.js. Любое решение, как это сделать?
@JagjeetSingh Нет; На самом деле, я спрашиваю, как я могу установить значение переменной в post.js, чтобы оно отображалось в запросе, представленном в index.js
@JagjeetSingh, как в ссылке здесь [graphql.github.io/graphql-js/mutations-and-input-types/] он показал рендеринг переменных в том же файле, но мне нужно получить к ним доступ из другого файла
Вы можете использовать импорт в файле post.js, например import index from './index.js', и использовать index.query
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Определите свой запрос как объект, прикрепленный к глобальному объекту window следующим образом:
window['query'] = graphql`
query IndexPageQuery($Limit: Int) {
allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}, limit: $Limit) {
totalCount`}};
Затем убедитесь, что какой бы файл ни инициализировал эту переменную, загружен перед любых файлов, которые зависят от вашей переменной запроса. Вы сможете получить к нему доступ так: window.query.
Например, если вы определяете свой запрос в index.js, убедитесь, что вы загрузили index.js, прежде чем загружать post.js или любой другой файл js, который зависит от этого запроса. (Не всегда необходимо, если у вас нет IIFE, но позволяет избежать случайных неопределенных проблем)
Примечание: Причина, по которой я определяю ваш запрос для объекта окна, выглядит следующим образом: window['query'] = query вместо window.query = query, потому что webpack не изменяет имя ключа объекта. Если вы определите его как window.query = query, webpack изменит имя.
Вы слышали о sessionStorage?
вы можете сохранять данные в паре ключ / значение и читать их где угодно.
Если вы используете веб-пакет, установите глобальную переменную запроса, например,
global.query = query;, надеюсь, это поможет вам