commit f6979d5be57c05a2c5ad911f9d4ca1501b7c688e · kitten.sh/urql

+6 -1

.gitignore

···

       17
       17
        
       tmp/

     

       18
       18
        
       dist/

     

       19
       19
        
       examples/*/public

     

       20
       20
       -
       examples/*/yarn.lock
     

       20
       20
       +
       examples/*/yarn.lock

     

       21
       21
       +
       examples/*/ios/

     

       22
       22
       +
       examples/*/android/

     

       23
       23
       +
       examples/*/.watchmanconfig

     

       24
       24
       +
       examples/*/metro.config.js

     

       25
       25
       +
       examples/*/babel.config.js

+18

examples/with-react-native/App.js

···

       1
       1
       +
       import React from 'react';

     

       2
       2
       +
       import { createClient, Provider } from 'urql';

     

       3
       3
       +
       

     

       4
       4
       +
       import PokemonList from './src/screens/PokemonList';

     

       5
       5
       +
       

     

       6
       6
       +
       const client = createClient({

     

       7
       7
       +
         url: 'https://trygql.dev/graphql/basic-pokedex',

     

       8
       8
       +
       });

     

       9
       9
       +
       

     

       10
       10
       +
       const App = () => {

     

       11
       11
       +
         return (

     

       12
       12
       +
           <Provider value={client}>

     

       13
       13
       +
             <PokemonList />

     

       14
       14
       +
           </Provider>

     

       15
       15
       +
         );

     

       16
       16
       +
       };

     

       17
       17
       +
       

     

       18
       18
       +
       export default App;

+15

examples/with-react-native/README.md

···

       1
       1
       +
       # Integrating with React Native

     

       2
       2
       +
       

     

       3
       3
       +
       Integrating urql is as simple as:

     

       4
       4
       +
       

     

       5
       5
       +
       1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)

     

       6
       6
       +
       

     

       7
       7
       +
       ```sh

     

       8
       8
       +
       yarn add urql graphql

     

       9
       9
       +
       # or

     

       10
       10
       +
       npm install --save urql graphql

     

       11
       11
       +
       ```

     

       12
       12
       +
       

     

       13
       13
       +
       2. Setting up the Client [here](App.js)

     

       14
       14
       +
       

     

       15
       15
       +
       3. Execute the Query [here](src/screens/PokemonList.js)

+4

examples/with-react-native/app.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "name": "withReactNative",

     

       3
       3
       +
         "displayName": "withReactNative"

     

       4
       4
       +
       }

+9

examples/with-react-native/index.js

···

       1
       1
       +
       /**

     

       2
       2
       +
        * @format

     

       3
       3
       +
        */

     

       4
       4
       +
       

     

       5
       5
       +
       import { AppRegistry } from 'react-native';

     

       6
       6
       +
       import App from './App';

     

       7
       7
       +
       import { name as appName } from './app.json';

     

       8
       8
       +
       

     

       9
       9
       +
       AppRegistry.registerComponent(appName, () => App);

+24

examples/with-react-native/package.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "name": "withreactnative",

     

       3
       3
       +
         "version": "0.0.1",

     

       4
       4
       +
         "private": true,

     

       5
       5
       +
         "scripts": {

     

       6
       6
       +
           "android": "react-native run-android",

     

       7
       7
       +
           "ios": "react-native run-ios",

     

       8
       8
       +
           "start": "react-native start",

     

       9
       9
       +
           "test": "jest",

     

       10
       10
       +
           "lint": "eslint ."

     

       11
       11
       +
         },

     

       12
       12
       +
         "dependencies": {

     

       13
       13
       +
           "graphql": "^15.5.0",

     

       14
       14
       +
           "react": "17.0.1",

     

       15
       15
       +
           "react-native": "0.64.0",

     

       16
       16
       +
           "urql": "^2.0.2"

     

       17
       17
       +
         },

     

       18
       18
       +
         "devDependencies": {

     

       19
       19
       +
           "@babel/core": "^7.12.9",

     

       20
       20
       +
           "@babel/runtime": "^7.12.5",

     

       21
       21
       +
           "babel-jest": "^26.6.3",

     

       22
       22
       +
           "metro-react-native-babel-preset": "^0.64.0"

     

       23
       23
       +
         }

     

       24
       24
       +
       }

+57

examples/with-react-native/src/screens/PokemonList.js

···

       1
       1
       +
       import React from 'react';

     

       2
       2
       +
       import { SafeAreaView, StyleSheet, Text, FlatList, View } from 'react-native';

     

       3
       3
       +
       import { gql, useQuery } from 'urql';

     

       4
       4
       +
       

     

       5
       5
       +
       const POKEMONS_QUERY = gql`

     

       6
       6
       +
         query Pokemons {

     

       7
       7
       +
           pokemons(limit: 10) {

     

       8
       8
       +
             id

     

       9
       9
       +
             name

     

       10
       10
       +
           }

     

       11
       11
       +
         }

     

       12
       12
       +
       `;

     

       13
       13
       +
       

     

       14
       14
       +
       const Item = ({ name }) => (

     

       15
       15
       +
         <View style={styles.item}>

     

       16
       16
       +
           <Text style={styles.title}>{name}</Text>

     

       17
       17
       +
         </View>

     

       18
       18
       +
       );

     

       19
       19
       +
       

     

       20
       20
       +
       const PokemonList = () => {

     

       21
       21
       +
         const [result] = useQuery({ query: POKEMONS_QUERY });

     

       22
       22
       +
       

     

       23
       23
       +
         const { data, fetching, error } = result;

     

       24
       24
       +
       

     

       25
       25
       +
         const renderItem = ({ item }) => <Item name={item.name} />;

     

       26
       26
       +
       

     

       27
       27
       +
         return (

     

       28
       28
       +
           <SafeAreaView style={styles.container}>

     

       29
       29
       +
             {fetching && <Text>Loading...</Text>}

     

       30
       30
       +
       

     

       31
       31
       +
             {error && <Text>Oh no... {error.message}</Text>}

     

       32
       32
       +
       

     

       33
       33
       +
             <FlatList

     

       34
       34
       +
               data={data?.pokemons}

     

       35
       35
       +
               renderItem={renderItem}

     

       36
       36
       +
               keyExtractor={item => item.id}

     

       37
       37
       +
             />

     

       38
       38
       +
           </SafeAreaView>

     

       39
       39
       +
         );

     

       40
       40
       +
       };

     

       41
       41
       +
       

     

       42
       42
       +
       const styles = StyleSheet.create({

     

       43
       43
       +
         container: {

     

       44
       44
       +
           flex: 1,

     

       45
       45
       +
         },

     

       46
       46
       +
         item: {

     

       47
       47
       +
           backgroundColor: '#dadada',

     

       48
       48
       +
           padding: 20,

     

       49
       49
       +
           marginVertical: 8,

     

       50
       50
       +
           marginHorizontal: 16,

     

       51
       51
       +
         },

     

       52
       52
       +
         title: {

     

       53
       53
       +
           fontSize: 20,

     

       54
       54
       +
         },

     

       55
       55
       +
       });

     

       56
       56
       +
       

     

       57
       57
       +
       export default PokemonList;