Linking React Native with already deployed aws amplify web app.

[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.22631
    CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
    Memory: 1.38 GB / 15.82 GB
  Binaries:
    Node: 20.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  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.0.0 => 2.0.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.2.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
    @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.0.12 => 6.8.0
    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.10.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
    eas-cli: 10.0.3
    expo-cli: 6.3.10
    expo: 50.0.17
    firebase-tools: 13.7.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

Describe the bug

First of all, let me explain my situation, I've already created and deployed a web app using aws amplify and GatsbyJS framework, so now I want to link my react native app to this web app.

So I started implementing what exist in this article called Syncing data to cloud which it has a section telling you if you have an already deployed web app in aws amplify then use it which is under "Existing backend" and it downloaded some files to the project and that's fine.

My problem is, I didn't know what is the next step, what should I do next to link my react native app to my web app using the same GraphQL file.

GraphQL file: https://drive.google.com/file/d/1gXtRALJnapxFFjWykr-C-70wYrLVsnPN/view?usp=sharing

Expected behavior

When you help me to integrate the same GraphQL of the web app to react native app, I will be able to do syncing between the mobile app and the cloud even in offline mode (the syncing work again in the online mode).

Reproduction steps

There is no specific details on how this will trigger a bug, I just didn't know what to do next. So please help!

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

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 after you ran amplify pull to get the configuration of you existing backend resource used by your Web app, you should be able to just start coding in your react-native project, like how you are interact with GraphQL APIs in your Web app.

[LearningPlus]

@HuiSF Thanks a lot for responding, I couldn't find the exact details about what you saying although I've searching for like a week, could you please tell me what I should do step by step (One by one)? Like a guidance of where to put the GraphQL file and so on!

I'm new to this field of using GraphQL in general and connecting them.

[chrisbonifacio]

Hi @LearningPlus it sounds like you are using DataStore, have an existing Amplify app, GraphQL API, and now you'd like to use the same GraphQL API in a separate React Native app.

The easiest way I can think of to do this would be to use the amplify pull command mentioned before to get the amplify folder and amplify_outputs.json file of your existing app to then be able to configure Amplify on the client side with the same resources as your other project.

You should then be able to use the Amplify CLI to generate the schema for DataStore.

https://docs.amplify.aws/gen1/react-native/build-a-backend/more-features/datastore/set-up-datastore/#code-generation-platform-integration

Let me know if this helps or if you hit any bumps along the way!

[LearningPlus]

@chrisbonifacio Thanks for answering, what you said is right regarding using DataStore, have an existing Amplify app, GraphQL API, and I would like to use the same GraphQL API in a separate React Native app.

I will check the URL you've sent and I would like to make it offline-first app but still didn't install Datastore and I've already used "amplify pull" which already downloaded the files you see in the image below!

So the first thing I should do is to follow the URL which will install the DataStore and make it offline-first app?

[chrisbonifacio]

@LearningPlus oh okay! if you already ran amplify pull then you just need to import the outputs file and pass it to Amplify.configure().

Let me know if you run into any issues setting up or using the code generation for DataStore.

Did you have DataStore enabled on the existing amplify app or are just now adding it for the first time?

Also, worth considering if you were using DataStore before:

if your existing app doesn't have DataStore yet but you need offline capabilities I would actually recommend looking into a third party library like TanStack's React Query which has offline capabilities as well.

I recommend this approach if you're starting new because DataStore comes with some extra complexity because of needing to learn how the sync process works, modelgen, how auth works a bit differently, etc and that all can make it difficult to "get it right," depending on the use case.

Also, if you decide to migrate to Amplify Gen 2 in the near future, DataStore is not supported in Gen 2 and our docs recommend developers refactor to or use third party libraries like this for offline capabilities anyway. So, it would be better to do it this way sooner than invest time into setting up DataStore, troubleshooting to get it to work, and then have to do it later.

https://tanstack.com/query/v4/docs/framework/react/plugins/createAsyncStoragePersister

Here is also an example repo of how it works in practice:

https://github.com/chrisbonifacio/Gen2Offline

It's a Gen 2 app so the amplify graphql client will be a bit different from what you're using. However, these are the important parts of the app showing how the offline capabilities are set up:

https://github.com/chrisbonifacio/Gen2Offline/blob/persistant/src/main.tsx

https://github.com/chrisbonifacio/Gen2Offline/blob/persistant/src/useTitles.ts

[LearningPlus]

@chrisbonifacio Thanks a lot for answering, Let me see if I understood what you've said.

oh okay! if you already ran amplify pull then you just need to import the outputs file and pass it to Amplify.configure(). >> I will try it and see what I can do!

Did you have DataStore enabled on the existing amplify app or are just now adding it for the first time? >> I'm building this react native mobile app for the first time and still I don't have DataStore yet, if you are talking about the web app which I've already built long time before the mobile app, then I have no DataStore on the web app.

I would actually recommend looking into a third party library like TanStack's React Query which has offline capabilities as well. >> Do I need to change anything in the web app to use it? or just it is simply install it on react native code on my mobile app?

if you decide to migrate to Amplify Gen 2 in the near future, DataStore is not supported in Gen 2 >> I don't think I would do that in the future!

[chrisbonifacio]

Do I need to change anything in the web app to use it? or just it is simply install it on react native code on my mobile app?

yes, it's a library you can install on your react native app. you basically wrap the app in a provider, give it a storage mechanism like AsyncStorage for React Native or localStorage for web, and set up your queries/mutations using query keys for caching and deduping requests and it will begin storing data locally so the app can work offline.

here's the link to their docs for more information:
https://tanstack.com/query/v4/docs/framework/react/plugins/createAsyncStoragePersister

[LearningPlus]

@chrisbonifacio Thanks for answering, I'm choosing this third part library to use for the offline-first app from now and I hope it would work, however, I have a few simple questions before I start:

1- Do I need to need to import the outputs file and pass it to Amplify.configure() now?

2- I have the web app authentication already which I want now to integrate to the mobile app (sign in and sign out only) so should I need to follow only this one Manage user session and credentials or I need to follow this one Set up Amplify Auth then use this Enable sign-up, sign-in, and sign-out or only the last mentioned one?

Here is what I did for the authentication in this .txt file and it showed an error:

amplify_status.txt

[chrisbonifacio]

@LearningPlus No problem!

1. Yes, you still need to import the outputs file and pass it to Amplify.configure(). This is required for the graphql client to work.

2. To use an existing Auth resource (Cognito User Pool) you only need to make sure the resource details (ex. user pool id, identity pool id, etc) are included in the amplify_outputs.json file.

The Set up Amplify Auth page you shared should be fine but you'll want to use the Existing Resources example on that page:

Existing Authentication resources from AWS (e.g. Amazon Cognito UserPools or Identity Pools) can be used with the Amplify Libraries by calling the Amplify.configure() method.

In your app's entry point (i.e. App.js, index.js, _app.js, or main.js), import and load the configuration file:

import { Amplify } from 'aws-amplify';

Amplify.configure({
  Auth: {
    Cognito: {
      //  Amazon Cognito User Pool ID
      userPoolId: 'XX-XXXX-X_abcd1234',

      // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
      userPoolClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',
      // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
      identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',

      // OPTIONAL - This is used when autoSignIn is enabled for Auth.signUp
      // 'code' is used for Auth.confirmSignUp, 'link' is used for email link verification
      signUpVerificationMethod: 'code', // 'code' | 'link'
      loginWith: {
        // OPTIONAL - Hosted UI configuration
        oauth: {
          domain: 'your_cognito_domain',

          scopes: [
            'phone',
            'email',
            'profile',
            'openid',
            'aws.cognito.signin.user.admin'
          ],
          redirectSignIn: ['http://localhost:3000/'],
          redirectSignOut: ['http://localhost:3000/'],
          responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code
        }
      }
    }
  }
});

// You can get the current config object
const currentConfig = Amplify.getConfig();

[LearningPlus]

@chrisbonifacio Thanks a lot, let me try them and then respond so please don't close this issue, I will respond in just a few days!

[LearningPlus]

@chrisbonifacio we've implemented the sign in and sign out successfully, I will try to take the files that we've pulled using the "amplify pull" as you see in the image then pass them to the "Amplify.configure()" and we see what questions it will give us.

If everything went fine in the next few steps, I will close this issue! See u later!

[LearningPlus]

@chrisbonifacio Hey Chris, I looked into the third party library and I really couldn't know well how to use it, I'm working on Gen1 and the references you gave before to me uses Gen2. However, I couldn't know how to create, read, update, and delete data so it work fine!

The refrences you gave me are for the Gen2:

https://github.com/chrisbonifacio/Gen2Offline/blob/persistant/src/main.tsx

https://github.com/chrisbonifacio/Gen2Offline/blob/persistant/src/useTitles.ts

Even the docs you send couldn't understand how to do it:

https://tanstack.com/query/v4/docs/framework/react/plugins/createAsyncStoragePersister

Here is my GraphQL file, please give me an example of how to implement the Teachers section you find in my GraphQL file so I can apply the other pages of how to do the CRUD operation, we almost complete the app after a very long time of development so I hope I can get this little help!

[chrisbonifacio]

Hi @LearningPlus, yes the repo has Gen 2 graphql client code but those should be swappable from client.models to client.graphql which Gen 1 supports.

This is the Gen 1 documentation on how to construct those graphql queries/mutations:
https://docs.amplify.aws/gen1/react/build-a-backend/graphqlapi/mutate-data/

The TanStack library just wraps api calls and caches them locally for offline usage

[LearningPlus]

@chrisbonifacio Thanks for answering, can u guid me step by step on how to do this all? I'm really new to this! like do this and then this!

[chrisbonifacio]

Hi @LearningPlus would you mind creating a post on our discord community server? GitHub might not be the best place for this kind of support since it would require quicker back and forth messaging to get you unblocked in a timely manner. Other developers in our community who have run into similar situations might also be able to help.

Here is the link to the server: https://discord.gg/3pdPB8Mw

You can create support posts in the #amplify-help channel.

Feel free to ping me on the post as well. My username is chrisbon.