docs: middleware examples are not valid TS

[mortifia]

https://www.apollographql.com/docs/apollo-server/integrations/middleware/#apollo-server-express

i get error with "No surcharge corresponds to this call." with

await new Promise(resolve => httpServer.listen({ port: 4000 }, resolve));

httpServer.listen is already asynchronous so why not have to use this ? :

await httpServer.listen({ port: 4000 });

with node v14, typescript, @types/node

[glasser]

To your second point: httpServer.listen is asynchronous, but it's not an async (Promise-returning) function. It takes a callback (which is equivalent to registering a listening event listener). See nodejs/node#21482

The doc examples are written in JS, not TS. The way that the built in typescript types around Promises work is, a Promise is a Promise<T>, and the resolve function it passes to its callback takes (roughly) something of type T. Which means that unless TS has some reason to believe that T is void, it expects an argument to be passed to resolve, and it's an error to not do that. (And httpServer.listen won't call the callback you give it with an argument.)

It would be nice if this Just Worked in TS; they do have an open but inactive issue that would fix this (and some other related ones like microsoft/TypeScript#40466).

But unfortunately for now this needs to either include await new Promise<void> or maybe be restructured in some other way. And adding that would be invalid JS.

You're not even the first person this week to bring this up! #5811
So I do think we should improve the docs. One way would be to change them all to TypeScript or to have both JS and TS versions but that's a big change (I'll look into it though). Another possibility would be to just add a comment above each await new Promise line saying

// In TypeScript, the next line should start `await new Promise<void>(resolve =>`

Thoughts?

[glasser]

I am informed that gatsby-theme-apollo-docs has a cool MultiCodeBlock component that magically transpiles TS into JS for us! I'll give that a shot on this page.

[mortifia]

thank you for the feedback and the speed of the response

my opinion on it will be to have the example in colapse or tabs like stripe we do in their documentation of stripe

but in the current state a comment should be sufficient

as long as I think about it this function compared to the old version that I knew is more difficult to understand and can lose a certain number of the subtlety with the callback and async and their side effect

[glasser]

All code blocks in the docs which use await new Promise now have both TS and JS versions available via a popup.

[mortifia]

perfect (☞ﾟヮﾟ)☞