ReactJS / Graphql: как экспортировать запрос для использования в другом компоненте?

На следующем этапе этого проекта мне нужно экспортировать запрос, чтобы я мог вызывать его из другого компонента, используя переменные запроса. Все примеры, которые я видел, не используют ни '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

31.07.2018 19:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 008

Ответы 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);

Спасибо за предложение. Я попробую позже и дам знать, как это происходит.

— 31.07.2018 20:59

Не знаю, как это реализовать. Мне нужно вызвать запрос после нажатия кнопки отправки и обновить отображение на основе ответа от данных. Каков синтаксис для вызова запроса с помощью кнопки отправки?

— 01.08.2018 21:42

31.07.2018 20:54