Skip to content

Fixed MongoDBCollection#watch on React Native#4155

Merged
kraenhansen merged 7 commits into
masterfrom
kh/react-native-watch-fixed
Dec 17, 2021
Merged

Fixed MongoDBCollection#watch on React Native#4155
kraenhansen merged 7 commits into
masterfrom
kh/react-native-watch-fixed

Conversation

@kraenhansen

@kraenhansen kraenhansen commented Dec 16, 2021

Copy link
Copy Markdown
Contributor

What, How & Why?

This closes #3494 by adding documentation on installing polyfills and a babel plugin, plus calling the React Native fetch polyfill with the right option.

If the user forgets to add the polyfill and calls watch()

TypeScript documentation as seen in VC Code

The JSDoc documentation

☑️ ToDos

  • 📝 Changelog entry
  • 📝 Compatibility label is updated or copied from previous entry
  • 🚦 Tests (manually locally)
  • 📱 Check the React Native/other sample apps work if necessary
  • 📝 Public documentation PR created or is not necessary
  • 💥 Breaking label has been applied or is not necessary

If this PR adds or changes public API's:

  • typescript definitions file is updated
  • jsdoc files updated

@kraenhansen kraenhansen self-assigned this Dec 16, 2021
@cla-bot cla-bot Bot added the cla: yes label Dec 16, 2021
Comment thread .eslintrc.json
],
"env": {
"es2017": true
"es2020": true

@kraenhansen kraenhansen Dec 16, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed to be able to use the globalThis keyword and should be okay for the platforms we support.

],
},
{
input: "src/react-native/index.ts",

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're adding a new "react-native" bundle to separate the code that runs on "react-native" from that which run on web.

// Setting this non-standard option to enable text streaming
// See https://github.com/react-native-community/fetch#enable-text-streaming
DefaultNetworkTransport.extraFetchOptions = {
reactNative: { textStreaming: true },

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add it as a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's already there - two lines above the line I commented on here :)

try {
// We'll await the response to catch throw our own error
return await DefaultNetworkTransport.fetch(url, {
...DefaultNetworkTransport.extraFetchOptions,

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried setting this only on the streaming requests, but that yield the following in my test app:

 LOG  Running "ReactNativeTestApp" with {"rootTag":61,"initialProps":{}}
 WARN  Invalid responseType: blob
 ERROR  {"code": -1, "message": "undefined is not an object (evaluating 'options.blobId')"}
 WARN  Invalid responseType: blob
 LOG  Unable to symbolicate stack trace: undefined is not an object (evaluating 'options.blobId')
 WARN  Invalid responseType: blob
 WARN  Invalid responseType: blob
 WARN  Invalid responseType: blob

@kraenhansen
kraenhansen force-pushed the kh/react-native-watch-fixed branch from c985b88 to 460ab84 Compare December 16, 2021 19:04
// Setting this non-standard option to enable text streaming
// See https://github.com/react-native-community/fetch#enable-text-streaming
DefaultNetworkTransport.extraFetchOptions = {
reactNative: { textStreaming: true },

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add it as a comment

@takameyer takameyer left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome. Do we need to prominently document this somewhere, besides in the comments?

@kraenhansen

Copy link
Copy Markdown
Contributor Author

Awesome. Do we need to prominently document this somewhere, besides in the comments?

Besides the changes I'm proposing to the TypeScript docs and JSDoc, I would say the instructions on adding the babel plugin and globals polyfill needs to be inserted on https://docs.mongodb.com/realm/sdk/react-native/examples/query-mongodb/#real-time-change-notifications as well.

@kraenhansen
kraenhansen merged commit 9459ffa into master Dec 17, 2021
@kraenhansen
kraenhansen deleted the kh/react-native-watch-fixed branch December 17, 2021 07:54
@github-actions github-actions Bot locked as resolved and limited conversation to collaborators Mar 16, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

collection.watch() fails on React Native SDK

3 participants