DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for GraphQL + TypeScript - What I've Found
Ben Doty
Ben Doty

Posted on

GraphQL + TypeScript - What I've Found

I've been working on an application recently where I have decided to use TypeScript with ApolloServer. It's a microservice architecture, so Apollo's Federation works great for me. However, despite being written in TypeScript, Apollo just absolutely struggles to use it. Now, it could be me, I've never used this combination before, but it seems to me that Apollo just doesn't have the developer experience it should, in TypeScript at least.

I've used Apollo multiple times in my projects, it always has worked fine, until now. Now, I still really like Apollo and will continue to use it. However, let me explain just how frustrating it is to use it with TypeScript.

beginIncrediblyFrustratingExperience():

Hey there! I see you are using TypeScript! This is great. Go ahead and set up your project like normal. Whoops, resolvers don't work right. You need IndexedString that takes an IResolver type that you get from the graphql-tools library.
Also, the IndexedString needs a custom definition.

So now you need a special interface that goes into a type that allows you to pass in the IResolvers. Implement all that, excellent it works.

Now you want to actually implement the resolvers? Great! Let's do that like normal except that every single parameter needs a type. Well, that makes sense except, I DON'T KNOW WHAT THAT TYPE IS! Okay, so we will just mark it as any. Bad practice but it works so let's move on. I'm on the clock here okay?

Now you want custom directives? Nope you can't have them because they require special types as well apparently. Also they don't just go in your federatedSchema, you have to create two schemas and merge them.

What's that? Your special types can't be found? Wonderful. The day just got better. Oh, and tests? Don't even bother with those. They will ruin your day. Write those in plain JavaScript or you'll have an aneurysm.

endStory()

I guess this is a bit of a rant because I've been working on this for days now and I have almost nothing to show for it. It's incredibly frustrating, but I also wanted to raise a little awareness of this issue. Now, like I said, I haven't tried this combination before. I've used both TypeScript and Apollo, but never together. I could be missing something somewhere. But from what I see, people have been opening issues and complaining about this in the repository. I'm curious if any of you have managed to find their way through this particular swamp. If you have, please direct me toward some resources I can use. Otherwise, I may just drop TypeScript all together. (I really don't want to if I don't have to). Anyway, thanks for taking the time to read this. I hope your journey is easier than mine.

Top comments (2)

Collapse
 
glasser profile image
David Glasser

Have you tried using graphql-code-generator.com/docs/pl... ?

Collapse
 
beendoty profile image
Ben Doty Author

I have not. Thank you. I'll look into that.

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!