повторно отображает onSubscriptionMsg, но не с новыми данными - PullRequest
0 голосов
/ 25 октября 2019

У меня действительно простой компонент, использующий Connect из aws-amplify-react

const EmployeeExpensesTable = () => {
  const [user, setUser] = useState(null)
  useEffect(() => { Auth.currentAuthenticatedUser().then(user => setUser(user)) }, [])
  console.log(user)

  if(!user) { return null }

  return (
    <Connect

      query={graphqlOperation(queries.listTransactions, { owner: user.username })}

      subscription={graphqlOperation(subscriptions.onCreateTransaction, { owner: user.username })}

      onSubscriptionMsg={(prev, { onCreateTransaction }) => {
        console.log('oncreatetransaction:', onCreateTransaction)
        console.log('prev', prev)
        return onCreateTransaction
      }}

    >
      {
        ({ data: { listTransactions }, loading, errors }) => {

          console.log('transactions', listTransactions)

          if (errors.length) return (<h3>Error</h3>)

          if (loading || !listTransactions) return (<p>loading...</p>)

          return (<core.components.Table data={listTransactions.items} />)
        }
      }
    </Connect>
  )
}

export default EmployeeExpensesTable

У меня есть внешний процесс ETL, который добавляет транзакции в таблицу DynamoDB. Подписка активируется, и мое сообщение oncreatetransaction отображается с новыми данными, а компонент Connect выполняет повторную визуализацию, но при этом используются исходные данные, а не новые данные. Что я делаю не так?

1 Ответ

1 голос
/ 26 октября 2019

Оказывается, что onSubscriptionMsg похоже на редуктор для состояния Connect компонента. Вам дано предыдущее значение и новое значение для функции, и вам нужно вернуть новое состояние.

onSubscriptionMsg={(prev, data) => ({
        listTransactions: {
          items: [...prev.listTransactions.items.slice(-9), data.onCreateTransaction ]
        }
      })

Вышеописанное прекрасно работает для меня. .slice(-9) - потому что я забочусь только о последних 10 добавленных строках.

...