Apollo GraphQL - data is SOMETIMES undefined and it stays like that

Question

Sometimes Apollo Client decides to fetch the data, sometimes it gives me undefined and it stays so - even though the query fully works on the backend and in the debugger I see the query is launched. Why? No errors in the console, all good.

EDIT: If I enable fast refresh and I change something in the component it will magically fetch the data, but almost never fetches the data on the first app render.

I use React-Native.

const TEST = gql`
    query NotesFetch {
      NotesFetch {
        notes {
          description
          id
          status
          images {
            filename
            mimetype
            encoding
            uri
          }
          timestamp
          username
        }
      }
    }
  `;

  const { loading, error, data } = useQuery(TEST);

  console.log(data) - sometimes okay, sometimes it stays undefined and doesn't change

Component:

     <View style={styles.cards}>
      {data && data.NotesFetch.notes &&
          data.NotesFetch.notes.map((p: any) =>  <NotesCard archive={true} key={p.id} {...p} />
        )
      }
    </View>

Answer 1

The problem comes directly from the Apollo Client library and how it handles React Native's observables - in short. Update it to the newest version as it was fixed on 16th May 2022 update - 3.6.4.

Provide @apollo/client/ /*.cjs.native.js versions of every @apollo/client/ /*.cjs bundle (including dependencies ts-invariant and zen-observable-ts) to help React Native's Metro bundler automatically resolve CommonJS entry point modules. These changes should render unnecessary the advice we gave in the v3.5.4 section below about metro.config.js. @benjamn in #9716