kitten.sh
Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1import React from 'react';
2import { SafeAreaView, StyleSheet, Text, FlatList, View } from 'react-native';
3import { gql, useQuery } from 'urql';
4
5const POKEMONS_QUERY = gql`
6 query Pokemons {
7 pokemons(limit: 10) {
8 id
9 name
10 }
11 }
12`;
13
14const Item = ({ name }) => (
15 <View style={styles.item}>
16 <Text style={styles.title}>{name}</Text>
17 </View>
18);
19
20const 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
42const 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
57export default PokemonList;