(DOCSP-27000): Call a Function for React Native

[mongodben]

Pull Request Info

Call a Function for React Native w @realm/react

Jira

• https://jira.mongodb.org/browse/DOCSP-27000

Staged Changes

• Call a Function (RN)

Reminder Checklist

If your PR modifies the docs, you might need to also update some corresponding
pages. Check if completed or N/A.

• Create Jira ticket for corresponding docs-app-services update(s), if any
• Checked/updated Admin API
• Checked/updated CLI reference

Review Guidelines

REVIEWING.md

[github-actions]

Readability for Commit Hash: 5d0632f

You can see any previous Readability scores (if they exist) by looking
at the comment's history.

Flesch Reading Ease scores for changed documents:

• source/sdk/react-native/app-services/call-a-function: 69.68

The following table can be helpful in assessing the readability score of a document.

Score	Difficulty
90-100	Very Easy
80-89	Easy
70-79	Fairly Easy
60-69	Medium
50-59	Fairly Hard
30-49	Hard
0-29	Very Hard

[takameyer]

Mostly good. I think we do need to show how to add types to the useUser hook in order to define custom function types, data types and profile types.

[takameyer]

You can also provide a fallback component to the UserProvider. Then your wrapper above would look like so:

<AppProvider appId={}>
  <UserProvider fallback={<AnonLogin/>}>
      <MyApp/>
  </UserProvider>
</AppProvider>

[takameyer]

The UserProvider will not render its children until there is a current user set on the app object.

[mongodben]

The UserProvider will not render its children until there is a current user set on the app object.

yeah it took me an hour+ of debugging to figure that out 😅

since this code isn't in the example i don't think we need to include that here.

tho when we @realm/reactify the auth pages, this pattern will be important to explain (cc @krollins-mdb)

[takameyer]

Suggested change

	const sumMethod1 = await user?.callFunction('sum', numA, numB);
	const sumMethod1 = await user.callFunction('sum', numA, numB);

I need to get a fix out for this immediately. The user from useUser should always be set and never undefined or null.

[mongodben]

ok, i'd rather keep this example as is til that's fixed since the code will throw a TS error if missing ?

[takameyer]

In my opinion, this would be the preferred syntax. But we need to show an example of how to type this. This can be done on the hook itself.

const user = userUser<FunctionTypes, CustomDataType, UserProfileDataType>;

[mongodben]

i'm confused by the code example and how it relates to calling a function. could you explain a bit more?

[takameyer]

If you declare the FunctionTypes as so:

type FunctionTypes = {
  sum: (number, number) => number;
};

const Component = () => {
  const user = userUser<FunctionTypes>();
  
  const sum = user.functions.sum(12, 14); // <- this is now typed
  const sum = user.functions.foo(12, 14); // <- this will now give a type error
  const sum = user.functions.sum("foo", "bar"); // <- this will also now give a type error
}

Then sum will be typed for user.function.sum with typed arguments and a return value.

CustomDataType and UserProfileDataType can be used to add any extra user data and have that typed as well.

The thing is, it is currently not possible to infer what a user has configured in App Services, so they would have to define the types themselves in order to have proper typing in their application. Ideally we should have a way to generate this for our users, but for now, this is the way.

[takameyer]

It's not very well documented. There is an example of this in realm-web. The type is set on the creation of Realm.App and in turn is applied to any user object returned from that app instance.

[mongodben]

got it, thanks for clarifying. this is quite useful. will include in the docs.

[mongodben]

ok, after spending a bit of time with this, it seems that the API is slightly different from what's in the above example.

these differences are:

1. i need to provide all 3 types to useUser<FunctionTypes, CustomDataType, Realm.DefaultUserProfileData> to not cause a TS error.
2. FunctionTypes must be a union with Realm.DefaultFunctionsFactory to work. for example:

type FunctionTypes = {
  sum: (a: number, b: number) => number;
} & Realm.DefaultFunctionsFactory;

for these reasons, i'd rather not include this in the docs yet, though i think longer-term it absolutely makes sense to include in the docs.

[mongodben]

you can see the working version with the types in this commit checkpoint: RN types on useUser.

going to revert those changes in the HEAD of the branch.

[mongodben]

Mostly good. I think we do need to show how to add types to the useUser hook in order to define custom function types, data types and profile types.

could you provide an example of how to do this? didn't see anything in the @realm/react unit test suite or elsewhere.