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

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

Я пробовал много способов, чтобы он работал, например SubscribetoMore endpoint от react-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
    }
  }`;

reactjs javascript graphql react-apollo graphql-subscriptions
person vipulgupta2048    schedule 05.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Изменять

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

To

  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>
        );

To

     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 перед функцией, и если вы хотите получить доступ к состоянию или реквизитам внутри этой функции, вам необходимо вручную связать их или изменить их на функции стрелок.

person Hemadri Dasari    schedule 05.01.2019