How to insert qraphQL to retool by using Apollo server base link

I want to make a user interface from my graphQL by using retool.

From now I’m on a project to build a graphQL interface by using retool. I have followed a tutorial to create a resource, but I found that my base URL faces a problem Test connection failed Error: Unprocessable and the error that shows request to http://localhost:4000/ failed, reason: DNS lookup ::1(family:6, host:localhost) is not allowed. Because It is a private IP address., here is my base URL http://localhost:4000/. I used to run my qraphQL on the Apollo server. So could you please give me any suggestions to do with this problem?


1 Like

I think the problem is the resource settings.

under URL parameters, you have a parameter defined with no key but a value. these are key/value pairs, so you can't have an un-named parameter. I think you can just delete 'http://localhost:4000' and/or click the X to remove the row.

Headers is technically valid, but unless it's some custom header you need for your implementation of the graphql server/api you're running locally you don't think you need this.

the last thing I can see is the use of http. graphql may require https unless you changed some of the settings. retool might also require https as a security concern.

below is the graphQL resource I use as an example:

for me, the service I'm connecting to only requires the custom header named x-apiKey. for you however, the connection may not require any sort of api key or it may require one named something other than x-apiKey, it all depends on what the server is expecting.

oh thank you so much bobthebear, I will try to change http to https and I will let you know a result after I finish .

1 Like

Hi, I had finished fix my code to run on https, but when I pass the url it show me a same error, however when I run this url https://localhost:443/ to test on server it work well.Can you give me a suggestion how to dead with it, or if I do something wrong you can give me a suggestion to. Thank you.

here is when I run to test my server on google.

here is when I try to test connection on retool.

While querying on localhost is not supported, we've seen users have success using ngrok. Let me know if that unblocks you or if I can help you with any roadblocks :slight_smile:

thought I'd leave some steps to follow for @AbbeyHernandez's suggestion:

Steps:

  1. Create a free Ngrok account here

  2. Navigate to and Copy your Auth Token from the Authtoken Page seen below

  3. Download Ngrok on your local computer

  4. Install Ngrok using the previously downloaded file

  5. Test installation:
    a) press windows key + r and type cmd then press enter

    • alternately: press windows key + x -> press i for Terminal -> press ctrl + shift + 2
  6. type ngrok help and press enter

  7. if the 'help me' text is displayed continue on, otherwise check your installation of Ngrok and make sure your system PATH environment variable contains the proper path to wherever you installed Ngrok

  8. type ngrok config add-authtoken <TOKEN> where <TOKEN> is the value copied from step #2, then press enter

  9. finally to start ngrok, since you wish to use port 443, you'd type ngrok http https://localhost:443/ then hit enter. you can also forward to a server on your local network with ngrok http 192.168.1.2:443f

  10. after starting ngrok you should see something similar to below
    image
    Forwarding is what you're looking for. in the example screenshot above you see:
    https://84c5df474.ngrok-free.dev -> http://localhost:8080.

  11. you can now use https://84c5df474.ngrok-free.dev everywhere instead of https://localhost:443

What's Going On
tldr; ngrok creates a reverse proxy as a sort of 'alias' for localhost

  • originally your software would send a web request with a destination of https://localhost:443. when this request leaves your computer it goes to your router. the routers job is to figure out where to forward data it receives to and in this case the router sees localhost and it sends it right back to the computer the request was made from.

  • with ngrok, when you make a web request the destination is now https://84c5df474.ngrok-free.dev and when this endpoint recieves anything it sends it right back to where it came from. the difference is the location of what's returning the data back to us. originally, the router was returning our data and it's located on your local network (intranet). when you use ngrok and send a request your software sends off the data to the router, then the router forwards the data to an external address instead of an internally known/mapped one (192.169.x.x)... when the router gets a request from 1 address then forwards it to the same address as it originated from, most browsers (and sometimes Windows) will complain and reject the request for safety reasons usually resulting in CORS errors.

NGROK Side-note:

  • the ngrok command automatically creates https endpoints. if you need http endpoints you can add --scheme http,https onto the end of the command to generate both or just --scheme http for only 1:
    ngrok http 192.168.1.101:443 --scheme http
1 Like