Can't fetch the data from my web app using React Native

[LearningPlus]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

GraphQL API

Amplify Version

v6

Amplify Categories

api

Backend

Amplify CLI

Environment information

# Put output below this line

PS D:\tructivity> npx envinfo --system --binaries --browsers --npmPackages --duplicates --npmGlobalPackages

  System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
    Memory: 4.42 GB / 15.82 GB
  Binaries:
    Node: 22.13.0 - C:\nvm4w\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.112)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @aws-amplify/react-native: ^1.1.6 => 1.1.6
    @azure/core-asynciterator-polyfill: ^1.0.2 => 1.0.2
    @babel/core: ^7.20.0 => 7.26.0
    @babel/preset-env: ^7.20.0 => 7.26.0
    @babel/runtime: ^7.20.0 => 7.26.0
    @react-native-async-storage/async-storage: ^2.1.0 => 2.1.0     
    @react-native-community/checkbox: ^0.5.17 => 0.5.17
    @react-native-community/datetimepicker: ^7.6.2 => 7.7.0        
    @react-native-community/masked-view: ^0.1.11 => 0.1.11
    @react-native-community/netinfo: ^11.4.1 => 11.4.1
    @react-native-community/slider: ^4.5.0 => 4.5.5
    @react-native-picker/picker: ^2.6.1 => 2.9.0
    @react-native/babel-preset: 0.73.21 => 0.73.21
    @react-native/eslint-config: 0.73.2 => 0.73.2
    @react-native/metro-config: 0.73.5 => 0.73.5
    @react-native/typescript-config: 0.73.1 => 0.73.1
    @react-navigation/drawer: ^6.6.6 => 6.7.2
    @react-navigation/native: ^6.1.9 => 6.1.18
    @react-navigation/stack: ^6.3.20 => 6.4.1
    @tanstack/query-async-storage-persister: ^5.62.16 => 5.62.16   
    @tanstack/query-codemods:  undefined ()
    @tanstack/react-query: ^5.63.0 => 5.63.0
    @tanstack/react-query-persist-client: ^5.63.0 => 5.63.0        
    @types/react: ^18.2.6 => 18.3.12
    @types/react-test-renderer: ^18.0.0 => 18.3.0
    HelloWorld:  0.0.1
    aws-amplify: ^6.12.0 => 6.12.0
    aws-amplify-react-native: ^7.0.8 => 7.0.8
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    babel-jest: ^29.6.3 => 29.7.0
    date-fns: ^3.2.0 => 3.6.0
    eslint: ^8.19.0 => 8.57.1
    jest: ^29.6.3 => 29.7.0
    moment: ^2.30.1 => 2.30.1
    prettier: 2.8.8 => 2.8.8
    react: 18.2.0 => 18.2.0
    react-native: 0.73.10 => 0.73.10
    react-native-big-calendar: ^4.10.0 => 4.15.2
    react-native-calendars: ^1.1302.0 => 1.1307.0
    react-native-collapsible: ^1.6.1 => 1.6.2
    react-native-color-picker: ^0.6.0 => 0.6.0
    react-native-date-picker: ^4.3.5 => 4.4.2
    react-native-elements: ^3.4.3 => 3.4.3
    react-native-gesture-handler: ^2.14.0 => 2.20.2
    react-native-get-random-values: ^1.11.0 => 1.11.0
    react-native-keyboard-aware-scroll-view: ^0.9.5 => 0.9.5       
    react-native-modal: ^13.0.1 => 13.0.1
    react-native-modal-datetime-picker: ^17.1.0 => 17.1.0
    react-native-modal-dropdown: ^1.0.2 => 1.0.2
    react-native-modal-dropdown-demo:  0.6.2
    react-native-modal-selector: ^2.1.2 => 2.1.2
    react-native-picker-select: ^9.0.0 => 9.3.1
    react-native-popup-menu: ^0.16.1 => 0.16.1
    react-native-rate: ^1.2.12 => 1.2.12
    react-native-reanimated: ^3.6.1 => 3.16.1
    react-native-redash: ^18.1.1 => 18.1.3
    react-native-safe-area-context: ^4.8.2 => 4.14.0
    react-native-screens: ^3.29.0 => 3.35.0
    react-native-splash-screen: ^3.3.0 => 3.3.0
    react-native-sqlite-storage: ^6.0.1 => 6.0.1
    react-native-store-review: ^0.4.0 => 0.4.3
    react-native-vector-icons: ^10.0.3 => 10.2.0
    react-test-renderer: 18.2.0 => 18.2.0
    typescript: 5.0.4 => 5.0.4
  npmGlobalPackages:
    @aws-amplify/cli: 12.13.0
    @svgr/cli: 8.1.0
    @vscode/vsce: 3.2.2
    create-next-app: 15.1.7
    eas-cli: 10.0.3
    expo-cli: 6.3.10
    expo: 50.0.17
    firebase-tools: 13.7.1
    generator-code: 1.11.5
    http-server: 14.1.1
    install: 0.13.0
    json-server: 1.0.0-alpha.23
    npm-check-updates: 17.1.10
    npx: 10.2.2
    react-native: 0.73.10
    start: 5.1.0
    yarn: 1.22.22
    yo: 5.1.0

Describe the bug

I've used the Tanstack library (which @chrisbonifacio has recommended to me before instead of using datastore) to fetch the data from my already developed web app (which is deployed on aws amplify) but this library is not working well. Here is the code snippet and the message error I'm getting in the picture, and the graphql file which is the same one used in the web app:

Code Snippet:

import { generateClient } from 'aws-amplify/api';
import * as APITypes from '../API';
import { createUser } from '../graphql/mutations';
import { allUsers } from '../graphql/queries';

const client = generateClient();

export const createNewUser = async (userInput: APITypes.CreateUserMutationVariables) => {
try {
const response = await client.graphql({
query: createUser,
variables: userInput
});

return response.data?.createUser;

} catch (error) {
console.error('Error creating user:', error);
throw error;
}
};

export const fetchAllUsers = async () => {
try {
const response = await client.graphql({
query: allUsers,
});

return response.data?.allUsers;

} catch (error) {
console.error('Error fetching users:', error);
throw error;
}
};

schema.graphql.zip

Expected behavior

If it worked, then it should use the graphql mutations and queries and make request using aws amplify.

Reproduction steps

Just use the code as I showed you before and it will give the error.

Code Snippet

// Put your code below this line.

import { generateClient } from 'aws-amplify/api';
import * as APITypes from '../API'; 
import { createUser } from '../graphql/mutations';
import { allUsers } from '../graphql/queries';

const client = generateClient();

export const createNewUser = async (userInput: APITypes.CreateUserMutationVariables) => {
  try {
    const response = await client.graphql({
      query: createUser,
      variables: userInput
    });
    
    return response.data?.createUser;
  } catch (error) {
    console.error('Error creating user:', error);
    throw error;
  }
};

export const fetchAllUsers = async () => {
  try {
    const response = await client.graphql({
      query: allUsers,
    });

    return response.data?.allUsers;
  } catch (error) {
    console.error('Error fetching users:', error);
    throw error;
  }
};

Log output

// Put your logs below this line

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
"aws_project_region": "us-east-2"
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[HuiSF]

Hi @LearningPlus from looking at the screenshot, there are two issues:

1. the warning
   This is due to that your Amplify.configure() call in the index.tsx doesn't include any API configuration. E.g.

Amplify.configure({
  Auth: { <your auth configuration> },
  API: {
    GraphQL: { <your GraphQL configuration >}
  }
})

2. the errors
   a. UserAlreadyAuthenticatedException: This error throws when you calling signIn() API after a user has signed in, so you need to call signOut() first before calling signIn() again
   b. NotAuthorizedException: "Token is not from a supported provider for this identity pool", this is mostly like caused by that you are using an identity ID that's is not associated with the user pool ID you specified in Amplify.configure()

[LearningPlus]

Thanks @HuiSF for your comment, can you tell me exactly what are the changes I need to make on that specific code I gave you? So I will redirect your answer to my developer to make the changes.