Как использовать QueryComponent с pollInterval и локальными изменениями состояния - PullRequest
Новая
       24

Как использовать QueryComponent с pollInterval и локальными изменениями состояния

0 голосов
/ 15 февраля 2019

Я пишу небольшое поисковое приложение, которое начинает поиск по RESTapi.Пока поиск не завершится, API ответит кодом состояния 260 или 250, если поиск завершен.Для этой цели я написал компонент с компонентом Query, который опрашивает RESTapi: 

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

export const GET_SEARCH_RESULTS = gql`
  query GetSearchResults($sid: String!) {
      getSearchResults(sid: $sid) {
          status,
          clusteredOffers { 
              id,
              bookingId,
              totalPrice
          }
      }
  }
`;

export default class extends React.PureComponent {
  client = null;

  updateStatus = (data) => {
    this.client.writeData({ data: { currentSearch: { status: 
data.getSearchResults.status, __typename: 'CurrentSearch' }} })
  };

  render() {
    const { sid } = this.props;

    return (
      <Query
        query={GET_SEARCH_RESULTS}
        variables={{ sid }}
        pollInterval={500}
        onCompleted={this.updateStatus}
      >
        {({ loading, error, data, stopPolling, client }) => {
          this.client = client;

          if (loading) return 'Loading...';
          if (error) return `Error! ${error.message}`;

          if(data.getSearchResults.status && 
data.getSearchResults.status !== "260") stopPolling();

          return (
            <div>
              {data.getSearchResults.clusteredOffers.map(offer => (
                  <div key={offer.id} >
                  <div>{offer.id}</div>
                  <div>{offer.bookingId}</div>
                  <div>{offer.totalPrice}</div>
                </div>
              ))}
            </div>
          )
        }}
      </Query>
    )
  }
}

В родительском компоненте мне также нужен статус текущего поиска.Итак, я добавил clientState в свой ApolloClient для записи удаленных данных в кеш клиента: 

import ApolloClient from "apollo-boost";
import Search from './components/Search';

const client = new ApolloClient({
  uri: "http://localhost:4000/graphql",
  clientState: {
    defaults: {
      currentSearch: {
        __typename: 'CurrentSearch',
        status: "0"
      }
    },
  }
});

....
const GET_CURRENT_SEARCH_STATE = gql`
    {
    currentSearch @client {
      status
    }
  }
`;

Как вы можете видеть, я использую onCompleted внутри моего компонента запроса опроса, чтобы записать текущее состояние влокальный кеш.

Имеет ли смысл или я должен читать статус из кэшированных удаленных данных?Если да, то как я могу получить кэшированные удаленные данные?

спасибо!

...