Skip to content

Commit ee416d7

Browse files
mongodbentakameyer
mongodben
and
takameyer
authored
(DOCSP-26999): Connect to App Services page (#2526)
## Pull Request Info @realm/react-ify RN 'Connect to App Services' page ### Jira - https://jira.mongodb.org/browse/DOCSP-26999 ### Staged Changes - [Connect to App Services (React Native)](https://docs-mongodbcom-staging.corp.mongodb.com/realm/docsworker-xlarge/DOCSP-26999/sdk/react-native/app-services/connect-to-app-services-app) ### Reminder Checklist If your PR modifies the docs, you might need to also update some corresponding pages. Check if completed or N/A. - [x] Create Jira ticket for corresponding docs-app-services update(s), if any - [x] Checked/updated Admin API - [x] Checked/updated CLI reference ### Review Guidelines [REVIEWING.md](https://github.com/mongodb/docs-realm/blob/master/REVIEWING.md) --------- Co-authored-by: Andrew Meyer <[email protected]>
1 parent 7536a9b commit ee416d7

File tree

6 files changed

+151
-65
lines changed

6 files changed

+151
-65
lines changed

‎examples/react-native/__tests__/ts/app-services/app-provider.test.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// :snippet-start: app-provider
2+
import React from 'react';
3+
import {AppProvider} from '@realm/react';
4+
// :remove-start:
5+
import {render} from '@testing-library/react-native';
6+
import {useApp} from '@realm/react';
7+
import {View, Text} from 'react-native';
8+
9+
const APP_ID = 'example-testers-kvjdy';
10+
11+
function MyApp() {
12+
const app = useApp();
13+
if (app.id !== APP_ID) {
14+
throw new Error('Did not instantiate app client');
15+
}
16+
return (
17+
<View>
18+
<Text>Foo</Text>
19+
</View>
20+
);
21+
}
22+
// :remove-end:
23+
function AppWrapper() {
24+
return (
25+
<View>
26+
<AppProvider id={APP_ID}>
27+
<MyApp />
28+
</AppProvider>
29+
</View>
30+
);
31+
}
32+
// :snippet-end:
33+
34+
test('Instantiate AppProvider correctly', () => {
35+
render(<AppWrapper />);
36+
});

‎examples/react-native/__tests__/ts/app-services/use-app.test.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// :snippet-start: use-app
2+
import React from 'react';
3+
import {useApp} from '@realm/react';
4+
import {Credentials} from 'realm';
5+
// :remove-start:
6+
import {App} from 'realm';
7+
import {AppProvider} from '@realm/react';
8+
import {render, fireEvent, waitFor} from '@testing-library/react-native';
9+
import {View, Button} from 'react-native';
10+
11+
const APP_ID = 'example-testers-kvjdy';
12+
13+
function AppWrapper() {
14+
return (
15+
<View>
16+
<AppProvider id={APP_ID}>
17+
<MyApp />
18+
</AppProvider>
19+
</View>
20+
);
21+
}
22+
// :remove-end:
23+
function MyApp() {
24+
const app = useApp();
25+
function logInAnonymousUser() {
26+
app.logIn(Credentials.anonymous());
27+
}
28+
// ...
29+
// :remove-start:
30+
return <Button onPress={logInAnonymousUser} testID='test-use-app' title='Test Me!' />;
31+
// :remove-end:
32+
}
33+
// :snippet-end:
34+
35+
afterEach(async () => await App.getApp(APP_ID).currentUser?.logOut());
36+
37+
test('useApp hook works correctly', async () => {
38+
const {getByTestId} = render(<AppWrapper />);
39+
const button = getByTestId('test-use-app');
40+
fireEvent.press(button);
41+
await waitFor(() => expect(App.getApp(APP_ID).currentUser).not.toBeNull());
42+
});

‎examples/react-native/bluehawk.sh

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
#!/bin/bash
2+
3+
PROJECT=$(git rev-parse --show-toplevel)
4+
JS_RN_EXAMPLES=$PROJECT/examples/react-native/__tests__/js/
5+
TS_RN_EXAMPLES=$PROJECT/examples/react-native/__tests__/ts
6+
7+
echo $JS_RN_EXAMPLES
8+
9+
JS_GENERATED_EXAMPLES=$PROJECT/source/examples/generated/react-native/js
10+
TS_GENERATED_EXAMPLES=$PROJECT/source/examples/generated/react-native/ts
11+
echo $JS_GENERATED_EXAMPLES
12+
13+
bluehawk snip $JS_RN_EXAMPLES -o $JS_GENERATED_EXAMPLES
14+
15+
bluehawk snip $TS_RN_EXAMPLES -o $TS_GENERATED_EXAMPLES
16+

‎source/examples/generated/react-native/ts/app-provider.test.snippet.app-provider.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import {AppProvider} from '@realm/react';
3+
4+
function AppWrapper() {
5+
return (
6+
<View>
7+
<AppProvider id={APP_ID}>
8+
<MyApp />
9+
</AppProvider>
10+
</View>
11+
);
12+
}

‎source/examples/generated/react-native/ts/use-app.test.snippet.use-app.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { useApp } from '@realm/react';
3+
import { Credentials } from 'realm';
4+
5+
function MyApp() {
6+
const app = useApp();
7+
function logInAnonymousUser() {
8+
app.logIn(Credentials.anonymous());
9+
}
10+
// ...
11+
}

‎source/sdk/react-native/app-services/connect-to-app-services-app.txt

+34-65
Original file line numberDiff line numberDiff line change
@@ -4,94 +4,63 @@
44
Connect to an Atlas App Services App - React Native SDK
55
=======================================================
66

7+
.. contents:: On this page
8+
:local:
9+
:backlinks: none
10+
:depth: 2
11+
:class: singlecol
12+
713
Overview
814
--------
915

1016
The App client is the interface to the App Services
1117
backend. It provides access to the :ref:`authentication functionality
12-
<react-native-authenticate-users>`, :ref:`functions <react-native-call-a-function>`, and
13-
:ref:`sync management <react-native-realm-sync>`.
14-
15-
16-
.. _react-native-access-the-app-client:
17-
18-
Access the App Client
19-
---------------------
20-
21-
Pass the Realm App ID for your App, which you can :ref:`find in the Realm UI <find-your-app-id>`.
22-
23-
.. tabs-realm-languages::
24-
25-
.. tab::
26-
:tabid: typescript
27-
28-
.. code-block:: typescript
29-
30-
const id = "<Your App ID>"; // replace this with your App ID
18+
<react-native-authenticate-users>`, :ref:`Atlas Functions <react-native-call-a-function>`,
19+
and :ref:`Atlas Device Sync <react-native-realm-sync>`.
3120

32-
.. tab::
33-
:tabid: javascript
21+
Before You Begin
22+
----------------
3423

35-
.. code-block:: javascript
36-
37-
const id = "<Your App ID>"; // replace this with your App ID
24+
#. :ref:`Create an App Services App <create-a-realm-app>`
25+
#. :ref:`Get Your App ID <find-your-app-id>`
3826

3927
.. _react-native-app-client-configuration:
28+
.. _react-native-access-the-app-client:
4029

41-
Configuration
42-
-------------
43-
44-
To set up your App client, pass a configuration object to an instance
45-
of ``Realm.App``.
46-
47-
.. tabs-realm-languages::
48-
49-
.. tab::
50-
:tabid: typescript
51-
52-
.. code-block:: typescript
53-
54-
const config = {
55-
id,
56-
};
57-
const app = new Realm.App(config);
58-
59-
.. tab::
60-
:tabid: javascript
30+
Configure the App Client
31+
------------------------
6132

62-
.. code-block:: javascript
33+
To set up your App client, pass the App ID string
34+
to the ``id`` prop of the ``AppProvider``.
35+
Wrap any components that need to access the App with the ``AppProvider``.
6336

64-
const config = {
65-
id,
66-
};
67-
const app = new Realm.App(config);
6837

69-
.. note::
70-
71-
``id`` is a required field of the application configuration object. To see the full list of fields for the configuration object that ``Realm.App`` accepts as a parameter, view the :js-sdk:`App Configuration Type Definitions <Realm.App.html#~AppConfiguration>`.
38+
.. literalinclude:: /examples/generated/react-native/ts/app-provider.test.snippet.app-provider.tsx
39+
:language: typescript
7240

7341
.. _react-native-app-retrieve-client:
7442

7543
Retrieve an Instance of the App Client
7644
--------------------------------------
7745

78-
To retrieve an instance of the App Client from anywhere in your application, call :js-sdk:`Realm.App.getApp() <Realm.App.html#getApp>` and pass in your ``App ID``.
79-
80-
.. tabs-realm-languages::
81-
82-
.. tab::
83-
:tabid: typescript
46+
All components wrapped within an ``AppProvider`` can access the :js-sdk:`App <Realm.App.html>`
47+
client with the ``useApp()`` hook. Using the App, you can authenticate users
48+
and access App Services.
8449

85-
.. code-block:: typescript
50+
.. literalinclude:: /examples/generated/react-native/ts/use-app.test.snippet.use-app.tsx
51+
:language: typescript
8652

87-
const app = Realm.App.getApp("<Your App ID>"); // replace this with your App ID
53+
.. _react-native-retrieve-client-outside-provider:
8854

89-
.. tab::
90-
:tabid: javascript
55+
Retrieve App Outside the App Provider
56+
-------------------------------------
9157

92-
.. code-block:: javascript
58+
To retrieve an instance of the App Client from anywhere in your application,
59+
instantiate a new instance of :js-sdk:`Realm.App() <Realm.App.html>`
60+
from the ``realm`` package, then pass in your ``App ID``.
9361

94-
const app = Realm.App.getApp("<Your App ID>"); // replace this with your App ID
62+
.. code-block:: typescript
9563

64+
import Realm from 'realm';
9665

97-
66+
const app = Realm.App.getApp("<Your App ID>");

0 commit comments

Comments
 (0)