Apollo Client, React, событие при включенном кеше - PullRequest
Новая
       11

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

0 голосов
/ 25 октября 2018 
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 не появятся элементы.Есть ли способ сделать это?Ничего не могу найти в документации.

1 Ответ

0 голосов
/ 26 октября 2018

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

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)

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

...