'Problem with fetching data on Iphone/ ios Simulator when using Apollo GraphQl + React Native

Some days ago i got specific problem with GraphQL + React Native stack. All right so i have React Native App which includes:

  • simple router + TabsNavigator;
  • small containerComponent and stupid component for render data; For work with backend i am using Apollo GraphQl (before i created server and work with this)

ISSUE: When i trying to fetch data using useQuery I get data - undefined, loading - true, but this problem actual ONLY on my Iphone or on ios Simulator. If i run application and tested its on Web browser its work correctly - I see graphql fetch request and data/loading status changed.

For fix problem I had done before:

  • removed and updated dependencies;
  • I tried use for useEffect for follow the useQuery update status. My flow includes added data in useState if loader will be false (its dont work on Iphone, ios Simulator);
  • tried run useQuery inside child component. Suppose that i don't know about some specific render details on React Native. Strange things, why application started and work fine on web browser, but dont work on Iphone, ios Simulator. Let's see some code.

Give away resolver for fetching data and fetch its in useQuery

import { gql } from '@apollo/client';
export const GET_ALL_USERS = gql
  fragment userFields on User {
    id
    username
    age
    posts {
      content
    }
  }
  query {
    getAllUsers {
      ...userFields
    }
  }

function GraphListContainer() {
  const { data, loading } = useQuery(GET_ALL_USERS);

  return (
    <View style={styles.renderBlock}>
      {data ? (
        <FlatList
          contentContainerStyle={listStyle.containerStyle}
          data={data?.getAllUsers}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item, index }) => (
            <ListRenderedTodos item={item} index={index} />
          )}
        />
      ) : loading ? (
        <View style={styles.greetingView}>
          <Text style={styles.greetingText}>Loading...</Text>
        </View>
      ) : (
        <View style={styles.greetingView}>
          <Text style={styles.greetingText}>Add Note...</Text>
        </View>
      )}
    </View>
  );
}

Thnx!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source