Using urql with typescript

[yassinm]

Hi All.

Thank you all for doing this library. I am trying to use urql with typescript. Unfortunately this is not covered i nthe docs from what i can see. Here is the repo i was able to recreate using vite and react.

Here is how i pass the client.
Here is how i make the actual query

POST /ui HTTP/1.1
Host: localhost:3001
Connection: keep-alive
Content-Length: 117
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36
sec-ch-ua-platform: "Linux"
content-type: application/json
Accept: */*
Origin: http://localhost:3001
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3001/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8

{"query":"query ($id: String!) {\n  Article(id: $id) {\n    id\n    __typename\n  }\n}","variables":{"id":"another"}}HTTP/1.1 404 Not Found
Access-Control-Allow-Origin: *
Date: Sat, 18 Dec 2021 22:26:18 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Content-Length: 0

this ^^^ is what i get when i run that application. I captured the above using wireshark since i could not figure how i could dump what is going out over the wire easily. Notice how interpolation did not happen for the parameter ? is this normal or the variables were supposed to be interpolated ?

curl 'http://localhost:8080/ui' \
  -H 'Accept-Encoding: gzip, deflate, br' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'Connection: keep-alive' \
  -H 'DNT: 1' \
  -H 'Origin: http://localhost:8080' \
  --compressed  --data-binary '{"query":"{\n  Article(id: \"another\"){\n    title\n  }\n}\n"}' 

Here is what i am using in curl to test that server.

1. can someone tell me if there is a way to see what is being sent to the server on the wire in a log. I had to use wireshark because i did not know better
2. can someone tell me if i am doing anything wrong ?
3. are there any samples to show how urql works with typescript ?
4. i noticed when i used the code generator it did not generate hooks ? i am not sure how this particular repo was able to generate these hooks

p.s.
I am super new to anything frontend related as in urql, react, typescript :-)

[JoviDeCroock]

The stuff you're linking seems to be related to network requests which doesn't have much correlation with Typescript itself.

Using gql-code-generatoe is fully supported with the urql presets.

If some interpolation isn't working feel free to link us a code-example of how it goes wrong. Generally when we have an $id in the query and variables has a key with id and some value it will be filled in by your back-end.

We have a few examples in this repo in with-react, which show working examples, the addition with TypeScript is leveraging generics to have knowledge about the return type of the useQuery.

So from the request: you're not doing anything wrong and those generated hooks look good

[yassinm]

Thank you so much for your help ! I was able to find the error after ruling out my usage of the API. FTR the problem was in my proxy settings in vite configured wrongly.