Клиент Apollo, React, событие при включенном кешировании

const sidebar = ({ selectedSidebarItem, selectItemCb }) => {
      const doExcelExport = () => {
        const data = client.readQuery({ query: getLeveransprojektOrders });
        const rows = data.projectOrders.map(order => Object.keys(order).map(key => order[key]));
        ....
      };

      return (
        <div className = "sidebar">
          <button disabled = {some condition}>Export excel</button> 
        </div>
      );
    };

Мне нужно отключить кнопку, пока в кеше Apollo не появятся элементы. Есть ли какой-нибудь встроенный способ сделать это? Ничего не могу найти в документации.

И как они появляются в кеше? Зачем нужно отключать кнопку, если в кеше нет элементов? Что, если вы просто проверите, пуст ли ваш массив данных? Или если запрос еще не завершен. Или и то, и другое: проверьте, имеет ли статус запроса loading или в массиве данных нет элементов.

— 26.10.2018 15:58

Да, но как мне проверить, загружается ли запрос?

— 26.10.2018 17:45

reactjs react-apollo apollo-client

25.10.2018 16:04

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

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

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

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

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

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

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

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

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

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

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

Ответы 1

Вы можете получить доступ к Query's loading prop из функции render prop следующим образом:

import gql from "graphql-tag";
import { Query } from "react-apollo";

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

const Dogs = ({ onDogSelected }) => (
  <Query query = {GET_DOGS}>
    {({ loading, error, data }) => {
      if (loading) return "Loading...";
      if (error) return `Error! ${error.message}`;

      return (
        <select name = "dog" onChange = {onDogSelected}>
          {data.dogs.map(dog => (
            <option key = {dog.id} value = {dog.breed}>
              {dog.breed}
            </option>
          ))}
        </select>
      );
    }}
  </Query>
);

Проверить документы для более подробной информации.

Или вы можете передать эту опору своему компоненту с помощью HOC.

import { graphql } from 'react-apollo'

const Dogs = ({ loading, dogs }) => <div>{loading && "Loading..."}</div>

const withDogs = graphql(GET_DOGS, {
  props: ({ data: { loading, error, dogs } }) => ({
    loading,
    error,
    dogs
  })
})

export default withDogs(Dogs)

Обратите внимание, что вам, вероятно, не нужно загружать данные непосредственно в обработчик событий, как это делаете вы.

26.10.2018 19:08