<Connect /> повторно отображает onSubscriptionMsg, но не с новыми данными

Question

У меня действительно простой компонент, использующий 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Компонент выполняет повторную визуализацию, но при визуализации использует исходные данные, а не новые. Что я делаю неправильно?

Answer 1

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

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

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