Apollo Upload Scalar type is TypeScript 'any'

[jthomperoo]

Hi,

Sorry if I'm missing something about this, but I'm a bit confused around using the Upload scalar as explained here:
https://www.apollographql.com/docs/apollo-server/data/file-uploads/

I'm trying to make my frontend upload an image through my GraphQL server, however when I write my mutation to upload this image:

mutation SetThumbnail($slug: String!, $upload: Upload!) {
    setThumbnail(slug: $slug, upload: $upload) {
        name
    }
}

And then generate using this query, it results in this:

export type Scalars = {
  ID: string;
  String: string;
  Boolean: boolean;
  Int: number;
  Float: number;
  Upload: any;
};

Specifically Upload: any;, is this a result of bad configuration by me, and is there a way I can get a more concrete type?
Here's my codegen.yml:

overwrite: true
schema: 
  - "../graphql/graph/schema.graphqls"
  - scalar Upload
documents: ["./src/**/*.tsx", "./src/**/*.ts", "./src/**/*.graphql"]
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:
      skipTypename: false
      withHooks: true
      withHOC: false
      withComponent: false

Sorry if this is a mistake on my end, here's some details around my environment:

    "@graphql-codegen/cli": "1.15.3",
    "@graphql-codegen/introspection": "1.15.3",
    "@graphql-codegen/typescript": "1.15.3",
    "@graphql-codegen/typescript-operations": "1.15.3",
    "@graphql-codegen/typescript-react-apollo": "1.15.3",

Thanks.

[ardatan]

Upload is a custom scalar that is not part of GraphQL Specification. Like all other custom scalars, Upload is any in generated code. You can use scalars field to provide your own TS definition for custom scalars; (e.g., for frontend, you can use Upload: File)
https://graphql-code-generator.com/docs/plugins/typescript#scalars

[jthomperoo]

Great! Thanks very much for the super fast reply!

[lgandecki]

For people that would like a bit more specific answer, you can do it like this:
add to your config:

{
  //..
  config: {
    scalars: {
      Upload: "Promise<GraphQLFileUpload>", // this
    },
  },
  plugins: [
    //...
    {
      add: `
            import { ReadStream } from "fs-capacitor";
          interface GraphQLFileUpload {
  filename: string;
  mimetype: string;
  encoding: string;
  createReadStream(options?:{encoding?: string, highWaterMark?: number}): ReadStream;
}`,
    },
  ],
};

[ardatan]

A quick note; but for client side it might not be relevant, Upload should be File for browser, ReactNativeFile for React Native.

[lgandecki]

oh yeah, I should have been more specific. My config was only for the server, not sure how to deal with Upload on the client yet. And this question was about a client :) But it pointed me do the right direction for how to deal with this on the server..

[alanrsoares]

Thanks @lgandecki. That's exactly what I needed.

[deCodeIt]

In case you're using codegen.yml then the following should work for you.

schema:
  - schema.gql
  - |
    scalar Upload
config:
  scalars:
    Upload: Promise<GraphQLFileUpload>
generates:
  gql-types.d.ts:
    plugins:
      - typescript
      - add:
          content:
            - "import { ReadStream } from 'fs';"
            - "interface GraphQLFileUpload {"
            - "  filename: string;"
            - "  mimetype: string;"
            - "  encoding: string;"
            - "  createReadStream( options?:{ encoding?: string, highWaterMark?: number } ): ReadStream;"
            - "}"

Do note that you'll need to install the @graphql-codegen/add plugin.