First immediate api call has no result callback

[Magrider]

What's going on?
First api call in the first screen has no result callback

Steps to reproduce

1. switch the stack screen order in 'main-navigator.tsx' to be
   <Stack.Screen name="demoList" component={DemoListScreen} /> <Stack.Screen name="welcome" component={WelcomeScreen} />

then start the program, you will find out it will never get the result
const result = await characterApi.getCharacters() in character-store.ts file

It only happen in the initial screen.

---

npx ignite-cli doctor results:
System
platform darwin
arch x64
cpu 12 cores Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
directory canbeDeleted /Users/maci/Documents/git/canbeDeleted

JavaScript (and globally-installed packages)
node 16.3.0 /usr/local/bin/node
npm 7.17.0 /usr/local/bin/npm
npm 7.17.0
yarn 1.22.10
yarn 1.22.10 /usr/local/bin/yarn
code-push-cli 2.1.9
ignite-cli 7.0.3

Ignite
ignite-cli 7.0.3 /usr/local/bin/ignite
ignite src build /Users/maci/.config/yarn/global/node_modules/ignite-cli/build

Android
java 1.8.0_261 /usr/bin/java
android home - /Users/maci/Library/Android/sdk

iOS
xcode 12.5.1
cocoapods 1.10.1 /usr/local/bin/pod

[Magrider]

I have to add a delay to solve it. I have no idea why.

[kateinkim]

Hi @Magrider! We have noticed this issue in other cases and what you did by adding a delay does solve the issue. This is a workaround that we are currently recommending. We are trying to figure out why this is happening and we would like to solve it as quickly as possible. Thanks 😃

[m9hmood]

I had the same issue,
I called the store action in useEffect but it wasn't working
after adding a delay to the actions it worked fine
but after checking the useEffect I found that I had an infinite loop
so, after I fixed it everything works normally now

[momolafrooo]

Me too i got the same issue, add i fixed it by adding a delay of 1ms. i know that's not the best solution, but it's the only one i found. Hope this bug will be fixed soon.

[abhisekz]

Don't know how but removing the ToggleStoryBook from app.tsx solves the issue. And works smoothly

[kateinkim]

Hi @abhisekz,
I just tested an Ignite app with your suggestion and it didn’t seem to work for me every time. I do think the issue might be coming from the ToggleStoryBook component so I will test some more. We are excited to find out what is causing this issue so we really appreciate you for trying different workarounds. 😃

[momolafrooo]

hi @kateinkim ,
If i remove the ToggleStoryBook from app.tsx it works for me. I don't know why it doesn't for you.
Thanks @abhisekz

[kateinkim]

Hey @momolafrooo & @abhisekz!
It seems like we are getting close to figuring out the issue. I've tested a bunch more and the data loads fine in release configuration but the bug does show up in debug configuration (which makes sense if ToggleStorybook is the culprit)
And I was able to fix it by removing the ToggleStorybook. (When I tested it yesterday without completely removing the ToggleStorybook and try to change some codes ended up not fixing the issue for me I guess)
I'm still not sure what about ToggleStorybook is causing the issue but I'll investigate more today.
But thanks so much for your help! 😄

[mrmurphy]

Indeed! Big thanks to Gerrard, whomever they may be on GitHub for commenting on my blog post about how my async functions called from hooks or events weren't completing:

https://mrmurphy.dev/async-functions-not-completing-in-react-native/

[syafiqmb]

this issue i think not about the ignite, but about using async / promises on useEffect.

[mrmurphy]

@syafiqmb Maybe not ignite specific.

In my specific case, this isn't about passing an async function to useEffect. It's about calling an async function from within useEffect, or from onPress. Either of which are normally supported in Javascript/React and should be semantically the same as calling a function which returns a promise.

In my situation there were two possible fixes:

1. Removing the async keyword from the function that useEffect called out to, and re-writing it to deal solely with promises. Changing nothing about the useEffect code.

• or -

2. Removing the ToggleStorybook element entirely from the app, also not changing anything with useEffect.

I don't know enough about ToggleStorybook to know if that's ignite-specific or not, but since ignite includes it by default, and I was having problems with functions hanging in the middle in the default template, this seems like an appropriate place to talk about it.

[ardasatata]

I can confirm, this issue persists in my project with ignite, first I thought it's because of the MST problem then I changed to Mobx, the problem is still there. 😞

all of my api call getting stuck because of this problem, hopefully, soon someone could find the solution

Thanks for the removing ToggleStorybook solution I'll do this instead whenever I'm not going to use storybook

    // <ToggleStorybook>
      <StoreProvider store={rootStore}>
        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
          <ErrorBoundary catchErrors={"always"}>
            <AppNavigator
              initialState={initialNavigationState}
              onStateChange={onNavigationStateChange}
            />
          </ErrorBoundary>
        </SafeAreaProvider>
      </StoreProvider>
    // </ToggleStorybook>

[ddaeschler]

I had a similar issue with another async/await call never returning. Removing ToggleStorybook also worked for me in a completely different context. I don't claim to understand why, just giving feedback here.

[ccnklc]

I have spent days until I find this issue through discussions. Deleting toggle storybook also resulted in resolving all my problems that I thought coming from MST, or MST-QGL and now everything works, waaaaaah!

I believe it is better to configure the base app without toggle story book until this issue is resolved, just to give people a nice setup without any issues to start developing their apps.

[dannyhw]

this should be resolved by #1906, you should check this again with the latest version or apply the patch from the PR to your own project.

[yulolimum]

@kateinkim can you verify that #1906 resolved the issue and close it if has?

[kateinkim]

Just tested this again and it seems like it is resolved by #1906. Closing this.