aws-amplify
client.models.observerQuery.subscribe with filter returned "items" won't trigger React re-render
Before opening, please confirm:
- [x] I have searched for duplicate or closed issues and discussions.
- [x] I have read the guide for submitting bug reports.
- [x] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
JavaScript Framework
React
Amplify APIs
DataStore
Amplify Version
v6
Amplify Categories
api
Backend
Amplify Gen 2
Environment information
# Put output below this line
System:
OS: macOS 15.5
CPU: (8) arm64 Apple M1
Memory: 302.92 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
npm: 11.4.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
Browsers:
Chrome: 137.0.7151.122
Safari: 18.5
npmPackages:
%name%: 0.1.0
@aws-amplify/backend: ^1.15.0 => 1.15.0
@aws-amplify/backend-cli: ^1.5.0 => 1.5.0
@aws-amplify/ui-react: ^6.11.2 => 6.11.2
@aws-amplify/ui-react-internal: undefined ()
@aws-amplify/ui-react-server: undefined ()
@aws-sdk/client-sesv2: ^3.824.0 => 3.824.0
@eslint/js: ^9.23.0 => 9.23.0
@tailwindcss/vite: ^4.1.8 => 4.1.8
@types/node: ^22.13.13 => 22.13.13
@types/react: ^19.0.10 => 19.0.12
@types/react-dom: ^19.0.4 => 19.0.4
@vitejs/plugin-react: ^4.3.4 => 4.3.4
aws-amplify: ^6.14.1 => 6.15.0
aws-amplify/adapter-core: undefined ()
aws-amplify/adapter-core/internals: undefined ()
aws-amplify/analytics: undefined ()
aws-amplify/analytics/kinesis: undefined ()
aws-amplify/analytics/kinesis-firehose: undefined ()
aws-amplify/analytics/personalize: undefined ()
aws-amplify/analytics/pinpoint: undefined ()
aws-amplify/api: undefined ()
aws-amplify/api/internals: undefined ()
aws-amplify/api/server: undefined ()
aws-amplify/auth: undefined ()
aws-amplify/auth/cognito: undefined ()
aws-amplify/auth/cognito/server: undefined ()
aws-amplify/auth/enable-oauth-listener: undefined ()
aws-amplify/auth/server: undefined ()
aws-amplify/data: undefined ()
aws-amplify/data/server: undefined ()
aws-amplify/datastore: undefined ()
aws-amplify/in-app-messaging: undefined ()
aws-amplify/in-app-messaging/pinpoint: undefined ()
aws-amplify/push-notifications: undefined ()
aws-amplify/push-notifications/pinpoint: undefined ()
aws-amplify/storage: undefined ()
aws-amplify/storage/s3: undefined ()
aws-amplify/storage/s3/server: undefined ()
aws-amplify/storage/server: undefined ()
aws-amplify/utils: undefined ()
aws-cdk: ^2.1018.1 => 2.1018.1
aws-cdk-lib: ^2.180.0 => 2.201.0
clsx: ^2.1.1 => 2.1.1
constructs: ^10.4.2 => 10.4.2
esbuild: ^0.25.2 => 0.25.2
eslint: ^9.23.0 => 9.23.0
eslint-plugin-react: ^7.37.4 => 7.37.4
eslint-plugin-react-hooks: ^5.1.0 => 5.2.0
eslint-plugin-react-refresh: ^0.4.19 => 0.4.19
globals: ^15.15.0 => 15.15.0 (11.12.0, 14.0.0)
react: ^19.0.0 => 19.0.0 (18.3.1)
react-dom: ^19.0.0 => 19.0.0 (18.3.1)
react-router: ^7.6.1 => 7.6.1
recharts: ^2.15.3 => 2.15.3
tailwindcss: ^4.1.8 => 4.1.8
tsx: ^4.19.3 => 4.19.3
typescript: ^5.8.2 => 5.8.2 (4.4.4, 4.9.5)
typescript-eslint: ^8.28.0 => 8.28.0
vite: ^6.2.0 => 6.3.5
vite-tsconfig-paths: ^5.1.4 => 5.1.4
npmGlobalPackages:
corepack: 0.29.3
npm: 11.4.2
Describe the bug
Inside of React useEffect hook
subscription = await client.models.Comment.observeQuery({
filter: {
pollId: { eq: poll.id }, //the primary id
},
}).subscribe(({ items }) => {
setComments([...items])
})
where the UI won't re-render while the correct amount of data is fetched through subscription, render method simply look like:
<div>Comments Number: {comments.length}</div>
Expected behavior
The UI part will correctly reflect what is being updated
Reproduction steps
- Node 20.17 and React 19
Code Snippet
// Put your code below this line.
Log output
// Put your logs below this line
aws-exports.js
No response
Manual configuration
No response
Additional configuration
No response
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
No response
Hi @razorwu1994, thank you for opening this issue. We will investigate this and get back to you once we have an update.
hey @razorwu1994 I've had some time investigating your issue, and it appears like a bug.
I was able reproduce the issue, but only if I set the comments using the items-array coming from the subscription
setComments(items)
I have seen that you already destructure the array, which works for me btw, so now I have some questions for you to narrow down the area of impact and potentially find find a fix.
- just out of curiosity, how did you verify the following:
while the correct amount of data is fetched through subscription
- Can you verify that the subscribe function always gets executed? e.g. when making changes in to the datastore in some other component, or in another browser, window or tab. - by opening your app in chrome and safari at the same time, make a change in one browser, and see the subscribe function being called in the other.
- Am I right to assume, that
setCommentsandcommentsare the result ofuseState? can you let me know what happens if you replace it withuseReducer?
// useReducer alias for useState.
const [comments, setComments] = useReducer((_, comments) => comments, []);
- Alternatively to 3.) can you try setting the state using the alternative syntax using a function?
setComments(() => [...items]);
As a small side note, which has no impact:
the subscribe-function of an observeQuery is not a Promise, so the await has no effect.
maybe this helps you already 🤞🏻
if not, it would be very helpful if you could provide answers to the questions.
