React Native DataDome module for React Navigation and URQL
Module for supporting DataDome in React Native applications using both React Navigation and URQL.
Installation
Use the package manager npm to install mobile-sdk-react-navigation-urql.
npm install @datadome/mobile-sdk-react-navigation-urql
iOS Installation
On npm installation completion, navigate to the iOS folder and run a pod installation
pod install
Warning: Cocoa Pod installation may occasionally not be successful (this is a known React Native issue). We suggest that you clean the ios build folder and run a fresh pod installation, as below:
rm -rf ios/build/
pod install
Usage
App.tsx file changes
import {
DataDome,
navigationRef,
} from "@datadome/mobile-sdk-react-navigation-urql";
// ...
// 1. Create a local DataDome instance
var ddInstance = DataDome.getInstance();
// 2. Set your client-side SDK key
ddInstance.setSdkKey("my-datadome-client-side-sdk-key");
// 3. Set up the map exchang
var client = createClient({
url: "https://datadome.co/graphql",
exchanges: [
dedupExchange,
cacheExchange,
mapExchange(ddInstance.getMapExchange()),
fetchExchange,
],
});
// 4. Include the navigationRef as a prop in your NavigationContainer
function App(): JSX.Element {
return (
<NavigationContainer ref={navigationRef}>
<Provider value={client}>
<RootNavigation />
</Provider>
</NavigationContainer>
);
}
Root Navigation changes
import { DataDomeModal } from "@datadome/mobile-sdk-react-navigation-urql";
// ...
// 1. Register the DataDomeModal as part of your stack
<Stack.Group>
<Stack.Screen
name="DataDomeModal"
component={DataDomeModal}
options={{ headerShown: false }}
/>
</Stack.Group>;
Configuration
Retry Exchange
In the case that you would like to retry the request that was blocked by DataDome, please follow the below setup.
Warning: It is crucial that the order of the exchanges is followed:
MapExchange, RetryExchange, FetchExchange
import { retryExchange } from "@urql/exchange-retry";
// ...
var client = createClient({
url: "https://datadome.co/graphql",
exchanges: [
dedupExchange,
cacheExchange,
mapExchange(ddInstance.getMapExchange()),
retryExchange({
retryIf: ddInstance.getRetryFunction,
}),
fetchExchange,
],
});
NavRef already set up
In the case that you already have a package that requires setting up its own navigation ref, you can invoke a second DataDome method for our package to use yours.
import { DataDome } from "@datadome/mobile-sdk-react-navigation-urql";
// ...
// 1. Create a local DataDome instance
var ddInstance = DataDome.getInstance();
// 2. Set your client-side SDK key
ddInstance.setSdkKey("my-datadome-client-side-sdk-key");
// 3. Set your navigation ref
ddInstance.setNavRef(merchantNavigationRef);
MapExchange already set up
In the case that you are already using your own mapExchange, we kindly ask you to include the DataDome mapExchange first. This is because exchanges bubble.
var client = createClient({
url: "https://datadome.co/graphql",
exchanges: [
dedupExchange,
cacheExchange,
mapExchange(ddInstance.getMapExchange()),
mapExchange(secondMapExchange()),
fetchExchange,
],
});
License
MIT