Generate TypeScript Interfaces with Apollo from Prisma & GraphQL

Today I decided to try out TypeScript and wanted to document my journey in trying to wrangle it together with the other libraries in the title. Seeing as how I couldn’t find any suitable documentation that worked for me, I wanted to go ahead and make life easier for others (and a forgetful future me starting a new project). I did a lot of unnecessary things, like install ApolloEngine on my server and getting an api key from apollo. I don’t think those steps were necessary so I didn’t include them.

The Issue: I want the Apollo CLI to generate TypeScript interfaces for me based on the queries I use from my Prisma server.

Assumptions: Your GraphQL server is built with graphql-yoga and prisma-binding. If you’re new to all this, there’s a great tutorial series here. Your index file should look something like this:

1. First things first, install the apollo-cli

npm install -g apollo
or
yarn global add apollo

2. Run your server. For me, I navigate to my project folder and type yarn dev Once your server is up and running, head to the next step.

3. Navigate to whichever project you want to have your Prisma TypeScript interfaces to be added. Run the command below. Make sure the endpoint is the location of your local server. For me it’s http://localhost:4000.

D:\Projects\DopeApp> apollo schema:download schema.json 
--endpoint=http://localhost:4000

This downloaded the schema of my Prisma server to schema.json which is now ready to generate some TypeScript interfaces from.

4. You’ll want to run the command below, but be sure to read the next paragraph as well as studying the apollo-cli documentation

D:\Projects\DopeApp> apollo codegen:generate prismaTypes.ts 
--queries=**/src/*.tsx  --schema=schema.json --target=typescript

With the schema flag we’re just picking the schema.json that was generated from step 3. For the target flag, I’m specifying typescript, but you can specify flow, swift or scala. The queries flag specifies where and what type of files in your project that the apollo code generator should scan in order to generate interfaces from. I want it only to look in my /src folder and only at .tsx files. In the future I may change it to **/src/queries.tsx to specifically target all queries.tsx files in my project. Set this flag to your liking.

Finally for this example I designated an output file prismaTypes.ts. If you don’t specify an output file, Apollo will generate several files named after their query at the location of a file that had a query in it.

By default apollo codegen:generate will look for template literals beginning with gql. It will compare what it finds to the schema.json and generate interfaces accordingly. In my next run of the command, I didn’t specify an output file and Apollo found my LoginMutation in queries.tsx and generated a LoginMutation.ts. Pretty nifty!

// src/righteous/hambone/queries.tsx
const LOGIN_MUTATION = gql`
  mutation LoginMutation($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      token
    }
  }
`

If you did not change the queries flag, or have it looking something like --queries=**/*.graphl , apollo will look at any .graphql file and try to generate types that match the schema.json. Not useful to me, but maybe to you.

Hope this saved someone some trouble!