Необходимо использовать setstate () данных, полученных из подписки GraphQL, в Reaction-Apollo - PullRequest
Новая
       21

Необходимо использовать setstate () данных, полученных из подписки GraphQL, в Reaction-Apollo

0 голосов
/ 05 января 2019

Я пытаюсь установить setState () запроса подписки GraphQL, который я выполняю с помощью response-apollo. Моя цель - сохранить весь объект, полученный от GraphQL, и сохранить его в состоянии в методе ComponentDidMount() файла App.js.

Я перепробовал множество способов, чтобы он работал, например, SubscribetoMore конечная точка реагировать-apollo, но я думаю, что пишу неправильный код реакции для него.

/ App.js 

const haveAnyFish = () => (
    <Subscription subscription={gql`${SUBSCRIPTION_SYNC}`} >
{({ loading, error, data }) => {
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :</p>;
  return (
    <div>
      <div>{fishes(data)}</div>
    </div>
  );
}}
</Subscription>
);

/ App.js 

class App extends React.Component {
    state = {
      fishes: {},
      order: {}
    };
componentDidMount() {
    const fishes = (data) => {
        this.setState({ fishes: data });
    }
  }

Запрос подписки 

const SUBSCRIPTION_SYNC = `
    subscription syncState{
      cotd {
      _id_2
      name
      desc
      image
      price
      status
    }
  }`;

1 Ответ

0 голосов
/ 05 января 2019

Вам не нужно иметь componentDidMount в вашем случае. Вы определили функцию внутри метода componentDidMount, и к ней нельзя получить доступ за пределами

Изменение 

   componentDidMount() {
        const fishes = (data) => {
            this.setState({ fishes: data });
        }
    }

К 

  fishes = data => {
        this.setState({ fishes: data });
  }

и изменить 

    const haveAnyFish = () => (
        <Subscription subscription={gql`${SUBSCRIPTION_SYNC}`} >
          {({ loading, error, data }) => {
              if (loading) return <p>Loading...</p>;
              if (error) return <p>Error :</p>;
           return (
             <div>
                <div>{this.fishes(data)}</div>
                </div>
             );
           }}
         </Subscription>
        );

К 

     haveAnyFish = () => (
          <Subscription subscription={gql`${SUBSCRIPTION_SYNC}`} >
         {({ loading, error, data }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error :</p>;
             return (
                <div>
                  <div>{this.fishes(data)}</div>
                </div>
              );
           }}
        </Subscription>
      );

Вы должны вызывать функцию haveAnyFish в своем компоненте без этого, поэтому после изменения кода выше вам необходимо вызвать функцию haveAnyFish с помощью this.haveAnyFish

Также обратите внимание, что всякий раз, когда вы создаете функции внутри компонента, они не нуждаются в const перед функцией, и если вы хотите получить доступ к состоянию или подпунктам внутри этих функций, вам необходимо вручную связать их или изменить их на функции стрелок

...