PricingBlog

TypeError: NetworkError when attempting to fetch resource.

  • cetfor-1267556058210242690

    logicalness

    1 year ago

    Hello, I'm really struggling here. I've been attempting to create a simple signup form to create an account in an app. I believe I have everything setup correctly, but I'm getting a TypeScript error when submitting my forn: "TypeError: NetworkError when attempting to fetch resource."

    I started testing with SupaBase, then switched to AppWrite.io and I get the same issues with both. I sent an API request in Postman and was able to create a user usign AppWrite's REST API no problem, but when I try the same request from my toddle.dev project I'm getting this error.

    Any ideas?
  • max.kayr-1267556512155566162

    Max

    1 year ago

    Can you share a screenshot from your API setup? Without any information, it is hard to see what is going on. Also, can you share the whole error message?
  • lucasg-1267556964896866426

    Lucas G

    1 year ago

    Is it a GET instead of POST
  • Other than that, please provide more info as Max said
    👍1
  • cetfor-1267557383580684362

    logicalness

    1 year ago

    Here are the API setup and error I get in the console.
    1267557382804996207-001.png
    1267557383542931607-003.png
    1267557383178162319-002.png
  • cetfor-1267557861823746078

    logicalness

    1 year ago

    I'm using Firefox on Windows, and I have the toddle.dev Firefox extension installed as well.
  • cetfor-1267558674428072008

    logicalness

    1 year ago

    Here's the formula for the body format as well. Thanks!
    1267558674445107344-004.png
  • max.kayr-1267560092987949086

    Max

    1 year ago

    Can you also show the call in the network tab of the dev tools. At first glance, I can't find the error
  • cetfor-1267561171540508776

    logicalness

    1 year ago

    1267561171318345850-005.png
  • Tod-1267561173402783896

    Tod

    1 year ago

    Great energy @logicalness! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
  • 133790786398584832-@logicalness
    max.kayr-1267562447070429291

    Max

    1 year ago

    What is the response from the server?
  • cetfor-1267562759240024084

    logicalness

    1 year ago

    I never get a response, it's like it never gets sent. If I click on the top POST, the response context to the right in dev tools in blank. When I was trying with supabase, no auth requests showed up in the REST API logs either.
  • max.kayr-1267563465673805926

    Max

    1 year ago

    Hmm... I'm not on my computer, but as far as I can see, the call looks fine. Did you try it in another browser? @Lucas G do you have any ideas?
  • cetfor-1267563696289349704

    logicalness

    1 year ago

    I haven't I'll try Chrome now.
  • lucasg-1267564585561489493

    Lucas G

    1 year ago

    Try ticking off the proxy
  • Might be CORS related
  • lucasg-1267565092678139976

    Lucas G

    1 year ago

    If it's a form submit, make sure Prevent Default action is there before the call too
  • cetfor-1267566525624225812

    logicalness

    1 year ago

    Ok, I tried Chrome, I don't get the same error in the console but it still didn't work.

    I switched back to Firefox, unchecked "Proxy" then selected the form element and added a submit action - when submit, then prevent default. And that caused by console.log to light up like a Christmas tree.

    Now I'm also getting this error: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cloud.appwrite.io/v1/account. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match https://localhost’)."
  • lucasg-1267567422009901086

    Lucas G

    1 year ago

    Ok the actions on the form should be Prevent Default then your API call
  • Assuming your button has a type attribute of submit
  • If after the prevent default you are now seeing the CORS then you can try turning proxy back on
  • The call being at the top of the list made it seem like a page refresh was going on which is the default action after a form submit which is why you almost always use 'prevent default' on forms
  • cetfor-1267568021258375259

    logicalness

    1 year ago

    My submit button has an event that now looks like: when click - then prevent default - the call appwrite signup. Should it be on the form element instead?
  • My submit button has a type of button but no attributes >.<
  • lucasg-1267568164162633732

    Lucas G

    1 year ago

    Leave it as is and try ticking proxy back on
  • One thing at a time lol
  • cetfor-1267568753483448451

    logicalness

    1 year ago

    Ok, uhm it's working now. Was it just a matter of "prevent default" then?
  • lucasg-1267568862782816388

    Lucas G

    1 year ago

    Looks like it
  • cetfor-1267568929476313178

    logicalness

    1 year ago

    Ok, I definitely need to read up on that. Thanks for your help!
  • lucasg-1267568953472061440

    Lucas G

    1 year ago

    It was submitting an empty call basically
  • It would have been more helpful if the API call returned an error indicating an empty body at least
  • But basically, standard/default form behaviour in browsers is to refresh page on submit
  • Hence why you typically use 'prevent default' on forms
  • cetfor-1267569209882185914

    logicalness

    1 year ago

    Ahh ok, I see, thank you!
  • lucasg-1267569217675333742

    Lucas G

    1 year ago

    Since the page refreshes, the variables were empty
  • cetfor-1267569675462508647

    logicalness

    1 year ago

    I'm very embarassed to admit that cost me 5 hours of my life. I don't think I'll be making that mistake again. lol. Again thank you so much for your help!
  • lucasg-1267569711491584142

    Lucas G

    1 year ago

    Small things like that are annoying to troubleshoot I know. Keep going though
    ❤️1
    💪1
  • max.kayr-1267571546914951198

    Max

    1 year ago

    Totally forgot about the form 😅 thanks Lucas!
    Maybe one hint for building/troubleshooting for @logicalness:
    I usually build each functionality in isolation so that I can see if it is working. In your case I would have simulated the call by toggling the "Auto- fetch" and hard-code the body value. So that I can see if the call itself is working without user interaction. This makes it easier to spot where the issue is
    🔥1