Add React Native GraphQL example

README.md

@@ -22,6 +22,10 @@ Usage examples have a consistent README structure, so it's easier to comprehend
 - [REST API with **React**](examples/rest-react)
 - [GraphQL API with **React**](examples/graphql-react-apollo) (Apollo)
 
+## React Native
+
+- [GraphQL API with **React Native**](examples/graphql-react-native-apollo) (Apollo)
+
 ### Angular
 
 - [REST API with **Angular**](examples/rest-angular)

examples/graphql-react-native-apollo/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

examples/graphql-react-native-apollo/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+};

examples/graphql-react-native-apollo/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

examples/graphql-react-native-apollo/.gitignore

@@ -0,0 +1,59 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/

examples/graphql-react-native-apollo/App.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import {
+  SafeAreaView,
+  StyleSheet,
+  View,
+  Text,
+  StatusBar,
+  FlatList,
+  ActivityIndicator,
+} from 'react-native'
+import { Header } from 'react-native/Libraries/NewAppScreen'
+import { ApolloProvider, gql, useQuery } from '@apollo/client'
+import client from './client'
+
+const GET_CHARACTERS = gql`
+  query GetCharacters {
+    characters {
+      results {
+        id
+        name
+      }
+    }
+  }
+`
+
+export const App = () => (
+  <ApolloProvider client={client}>
+    <MyRootComponent />
+  </ApolloProvider>
+)
+
+const Item = ({ title }) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+)
+
+export const MyRootComponent = () => {
+  const { data, loading, error } = useQuery(GET_CHARACTERS)
+
+  const DATA = data?.characters?.results
+
+  const renderItem = ({ item }) => {
+    return <Item title={item.name} />
+  }
+
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.sectionTitle}>Rick and morty MSW demo</Text>
+
+        <Header />
+
+        {loading && <ActivityIndicator testID="loading" />}
+
+        {error && <Text testID="error">{`${error}`}</Text>}
+
+        {!loading && !error && DATA?.length > 0 && (
+          <FlatList
+            testID="list"
+            data={DATA}
+            renderItem={renderItem}
+            keyExtractor={(item) => item.id}
+          />
+        )}
+      </SafeAreaView>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: 'black',
+    marginBottom: 40,
+  },
+  container: {
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+    backgroundColor: 'white',
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32,
+  },
+})
+
+export default App

examples/graphql-react-native-apollo/README.md

@@ -0,0 +1,55 @@
+# React Native (GraphQL)
+
+This repository illustrates how to use [Mock Service Worker](https://github.com/mswjs/msw) to mock a GraphQL server for development and testing in a React Native project.
+
+## Technologies
+
+- [**React Native**](https://reactnative.dev)
+- [React Testing Library](https://github.com/testing-library/react-testing-library) for testing assertions;
+
+## Getting started
+
+```bash
+$ git clone https://github.com/mswjs/examples.git
+$ cd examples
+$ yarn
+$ cd graphql-react-native-apollo
+```
+
+## Running locally
+
+```bash
+$ yarn start
+```
+
+### Android
+
+```bash
+$ yarn android
+```
+
+### iOS
+
+```bash
+$ yarn ios
+```
+
+## Tests
+
+```bash
+$ yarn test
+```
+
+## Key points
+
+- [`mocks/handlers.js`](mocks/handlers.js) describes request handlers to use.
+
+### React Native
+
+- [`mocks/native.js`](mocks/native.js) enables request interception in React Native runtime;
+- [`index.js`](index.js) conditionally enables mocking in `development` environment.
+
+### NodeJS
+
+- [`mocks/server.js`](mocks/server.js) enables requests interceptions in NodeJS (i.e. for tests with jest);
+- [`jest.setup.js`](jest.setup.js) configures test runner to use API mocking in tests.

examples/graphql-react-native-apollo/android/app/BUCK

@@ -0,0 +1,55 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
+
+lib_deps = []
+
+create_aar_targets(glob(["libs/*.aar"]))
+
+create_jar_targets(glob(["libs/*.jar"]))
+
+android_library(
+    name = "all-libs",
+    exported_deps = lib_deps,
+)
+
+android_library(
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
+)
+
+android_build_config(
+    name = "build_config",
+    package = "com.GraphQLReactNativeApollo",
+)
+
+android_resource(
+    name = "res",
+    package = "com.GraphQLReactNativeApollo",
+    res = "src/main/res",
+)
+
+android_binary(
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
+)