Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add with-react-native example (#1607)

* Add with-react-native example

authored by

Yanko Valera and committed by
GitHub
f6979d5b 1788b3b2

+133 -1
+6 -1
.gitignore
··· 17 17 tmp/ 18 18 dist/ 19 19 examples/*/public 20 - examples/*/yarn.lock 20 + examples/*/yarn.lock 21 + examples/*/ios/ 22 + examples/*/android/ 23 + examples/*/.watchmanconfig 24 + examples/*/metro.config.js 25 + examples/*/babel.config.js
+18
examples/with-react-native/App.js
··· 1 + import React from 'react'; 2 + import { createClient, Provider } from 'urql'; 3 + 4 + import PokemonList from './src/screens/PokemonList'; 5 + 6 + const client = createClient({ 7 + url: 'https://trygql.dev/graphql/basic-pokedex', 8 + }); 9 + 10 + const App = () => { 11 + return ( 12 + <Provider value={client}> 13 + <PokemonList /> 14 + </Provider> 15 + ); 16 + }; 17 + 18 + export default App;
+15
examples/with-react-native/README.md
··· 1 + # Integrating with React Native 2 + 3 + Integrating urql is as simple as: 4 + 5 + 1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/) 6 + 7 + ```sh 8 + yarn add urql graphql 9 + # or 10 + npm install --save urql graphql 11 + ``` 12 + 13 + 2. Setting up the Client [here](App.js) 14 + 15 + 3. Execute the Query [here](src/screens/PokemonList.js)
+4
examples/with-react-native/app.json
··· 1 + { 2 + "name": "withReactNative", 3 + "displayName": "withReactNative" 4 + }
+9
examples/with-react-native/index.js
··· 1 + /** 2 + * @format 3 + */ 4 + 5 + import { AppRegistry } from 'react-native'; 6 + import App from './App'; 7 + import { name as appName } from './app.json'; 8 + 9 + AppRegistry.registerComponent(appName, () => App);
+24
examples/with-react-native/package.json
··· 1 + { 2 + "name": "withreactnative", 3 + "version": "0.0.1", 4 + "private": true, 5 + "scripts": { 6 + "android": "react-native run-android", 7 + "ios": "react-native run-ios", 8 + "start": "react-native start", 9 + "test": "jest", 10 + "lint": "eslint ." 11 + }, 12 + "dependencies": { 13 + "graphql": "^15.5.0", 14 + "react": "17.0.1", 15 + "react-native": "0.64.0", 16 + "urql": "^2.0.2" 17 + }, 18 + "devDependencies": { 19 + "@babel/core": "^7.12.9", 20 + "@babel/runtime": "^7.12.5", 21 + "babel-jest": "^26.6.3", 22 + "metro-react-native-babel-preset": "^0.64.0" 23 + } 24 + }
+57
examples/with-react-native/src/screens/PokemonList.js
··· 1 + import React from 'react'; 2 + import { SafeAreaView, StyleSheet, Text, FlatList, View } from 'react-native'; 3 + import { gql, useQuery } from 'urql'; 4 + 5 + const POKEMONS_QUERY = gql` 6 + query Pokemons { 7 + pokemons(limit: 10) { 8 + id 9 + name 10 + } 11 + } 12 + `; 13 + 14 + const Item = ({ name }) => ( 15 + <View style={styles.item}> 16 + <Text style={styles.title}>{name}</Text> 17 + </View> 18 + ); 19 + 20 + const PokemonList = () => { 21 + const [result] = useQuery({ query: POKEMONS_QUERY }); 22 + 23 + const { data, fetching, error } = result; 24 + 25 + const renderItem = ({ item }) => <Item name={item.name} />; 26 + 27 + return ( 28 + <SafeAreaView style={styles.container}> 29 + {fetching && <Text>Loading...</Text>} 30 + 31 + {error && <Text>Oh no... {error.message}</Text>} 32 + 33 + <FlatList 34 + data={data?.pokemons} 35 + renderItem={renderItem} 36 + keyExtractor={item => item.id} 37 + /> 38 + </SafeAreaView> 39 + ); 40 + }; 41 + 42 + const styles = StyleSheet.create({ 43 + container: { 44 + flex: 1, 45 + }, 46 + item: { 47 + backgroundColor: '#dadada', 48 + padding: 20, 49 + marginVertical: 8, 50 + marginHorizontal: 16, 51 + }, 52 + title: { 53 + fontSize: 20, 54 + }, 55 + }); 56 + 57 + export default PokemonList;