Help to get working when using Expo?

[GollyJer]

Hi. I'm trying to get urql-devtools working with my Expo project. Any help is greatly appreciated! https://stackoverflow.com/q/65161825/25197

[andyrichardson]

Hey there, thanks for reaching out! Stoked to hear you want to join the club 🥳

The devtools exchange needs to speak to the running instance of urql-devtools.

For IOS (emulated)

No need to do anything - the virtual device and the host device both share the same network connection

For IOS (device)

I don't actually know... but I'll find out :+1:

For Android (emulated + device)

Using ADB with reverse tunneling

---

If this doesn't answer your question, can you provide more info such as:

• Are you running this on Android or IOS?
• Is the app running in an emulator or a device?

[GollyJer]

@andyrichardson Thanks so much for getting back to me! I've spent a couple hours on this and still can't get it to work. By default the Expo dev tools run on port 19001. Other dev tools... like react-native-debugger, which I use for Apollo debugging, allow the user to set the listening port to 19001.

Because the urql extension has the port hard coded I went about seeing if I could change the port on which Expo serves the debugger. I found this setting and added it to app.json.

"packagerOpts": {
        "port": 7700
    }

Once that was changed Expo started launching devtools on that port.

Debugging Remote JS from the Expo app on Android loads in the devtools, as desired, as evidence by console logs showing in the devtools console. (Meaning the app is talking via port 7700).

I thought this would be the winner but sadly, clicking on the Urql tab still shows the "Waiting for Exchange" message. 😢

Have you or anyone on the team gotten it to work? Sorry to be such a pain. I'm so fed up with Apollo I'd love to get this working.

[andyrichardson]

@GollyJer you're not at all being a pain!

Would be really useful if we could get more information from you; including an example repo and steps that to reproduce the issue.

Here's an example:

About

Devtools isn't detecting an app on Android (physical device)

Reproduction

1. Clone this example react native project
2. Plug in Android phone via USB
3. Run yarn install
4. Run yarn start
5. Open devtools using npx npx urql-devtools

Expected result

• App opens on Android phone
• Urql Devtools opens in standalone window
• Urql devtools detects app

Actual result

• App opens on Android phone
• Urql devtools opens in standalone window
• Urql devtools stays on "waiting for exchange" notice

[GollyJer]

Hey @andyrichardson. Thanks again for the response. I'll get you a better reproduction soon.

Also, I just wanted to point you at this tweet thread in case you didn't see it.

[andyrichardson]

Sounds good!

Yeah I've seen the tweet and discussion on stack overflow but without reproduction steps it's incredibly hard to work out what the problem is.

I linked to it above but just in case you didn't see or read the README, have you followed these steps?

[GollyJer]

@andyrichardson Sorry for not posting a reproduction. I thought from the tweet reply from Expo made it clear that any Expo managed project will not work with urql-devtools.

Do you want me to create a starter Expo project with urql somewhere? I was assuming you already have one set up and using a graphql endpoint that works for you. If not, let me know and I can get throw one together.

Loving urql. This is the last piece of the puzzle. It may be worth trying to work on getting integrated into React Native Debugger. We use it to access Apollo Devtools when using Expo. React Native Debugger allows the user to specify the listening port of the React Server which I think is the primary issue here.

Hoping to help in any way I can. Thanks.

Jeremy

[andyrichardson]

Thanks @GollyJer!

Just filling out the reproduction statement would be a huge help (likely no need for a repo for this one)!

I thought from the tweet reply from Expo made it clear that any Expo managed project will not work with urql-devtools.

I haven't seen the response from Expo but I see no reason why this wouldn't work with expo (in the past, we have tested this out on expo without issue).

The problem is most likely that you are running on a device which does not have reverse tunneling set up. The devtools exchange will try to establish a websocket connection with localhost - this will not work if you are using a device without reverse tunnelling (as there is no devtools instance running on your android device).

Loving urql. This is the last piece of the puzzle.

Thanks for the feedback - will pass it on ❤️

It may be worth trying to work on getting integrated into React Native Debugger.

Thanks for the suggestion - this and the chrome devtools protocol are both things we're considering but it's unclear whether this will cover all use cases (expo, native, ios, android, etc) and it's a considerable amount of work to get this implemented.

If you have experience with any of this and are looking to contribute, we'd be more than happy to consider proposals + PRs!

[erquhart]

The reply from Expo that @GollyJer was referencing is in the tweet thread he linked, specifically the replies by Evan Bacon, longtime Expo eng lead. @kitten replied as well for urql. Just curious if there's any news on this front.

[andyrichardson]

Hey @erquhart, no updates but would be open to contributions 👍

[erquhart]

Glad to hear it, thank you. And certainly not incumbent on you as OSS maintainers to build or fix anything! I at least wanted to make sure it was clear that it doesn't currently work with Expo, and that this has indeed been acknowledged by the Expo team, as that seemed to be a point of disagreement from your last comment:

I haven't seen the response from Expo but I see no reason why this wouldn't work with expo (in the past, we have tested this out on expo without issue).