Typescript constraint on query shape?

Help
#1

Hi, apologies if this has already been asked. Does anyone know of a way to leverage Typescript to constrain the shape/selection set of a query? Say you’re writing a function that receives QueryOptions as an argument, and the function executes the query specified by QueryOptions.query.

Let’s say the function is expecting a query with this shape:

query GetFoos ( $after: String, $first: Int ) {
  foos( first: $first, after: $after ) {
    pageInfo {
      endCursor
      hasNextPage
    }
    edges {
      cursor
      node {
        ...fields on node
      }
    }
  }
}

Now suppose we pass the function a query that is missing pageInfo in the selection set, or that aliases edges. Is there any way to have Typescript catch this, or would you have to provide your own validation of the query DocumentNode?

Thanks!

#2

Hi,
not sure how others are doing it but I generate my typing using this:

My dev dependencies:

"@graphql-codegen/cli": "2.6.2",
"@graphql-codegen/typescript-resolvers": "2.6.4",
"@graphql-codegen/typescript-document-nodes": "2.2.11",
"@graphql-codegen/typescript": "2.4.11",
"@graphql-codegen/typescript-mongodb": "2.3.9",
"@graphql-codegen/introspection": "2.1.1"

Then you need config, my is simply called codegen.yml

overwrite: true
schema: "http://localhost:4000"
documents: null
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-resolvers"
      - "typescript-mongodb"
      - "typescript-document-nodes"
  ./graphql.schema.json:
    plugins:
      - "introspection"

Using this config, generated code will be placed into src/generated and graphql.schema.json is in main directory.

Then you need script in package.json

"codegen": "graphql-codegen --config codegen.yml"

That’s it. You need to make sure that graphql server is responding correctly on http://localhost:4000
Then run the script. It will call the server, pull out config and generate typings for you. You will get types for your data, resolvers, everything.