Apollo GraphQL server (v3) - TypeScript - Error - missing the following properties - not assignable to parameter of type

Help
1

HI,

I am trying to implement the Apollo GraphQL server (v3) with TypeScript.

I followed the documentation provided on the Apollo Doc website. and I am able to start the project.

However, I am still seeing a typescript error in the code.

apollo-error
apollo-error1067×483 70.3 KB 

Argument of type '{ schema: GraphQLSchema; introspection: true; debug: boolean; plugins: any[]; context: ({ req }: ExpressContext) => Promise<{}>; }' is not assignable to parameter of type 'Config<ExpressContext>'.
  Type '{ schema: GraphQLSchema; introspection: true; debug: boolean; plugins: any[]; context: ({ req }: ExpressContext) => Promise<{}>; }' is missing the following properties from type 'Config<ExpressContext>': formatError, rootValue, validationRules, executor, and 5 more.

I am not sure if this is related to the Library or the bad implementation of tsconfig from my side.

I appreciate any suggestion or idea on how to solve this.

Best Regards,
Ahmad EL Masri

2

Are you able to share more context? eg, a repo we can clone or a codesandbox.io sandbox that shows this error?

I’m specifically a bit confused about where Config<ExpressContext> comes from here, as Config isn’t quite the name of the type in question… I also can’t tell if you’re using apollo-server or apollo-server-express here. A full reproduction would help!

3

HI @glasser

Thank you for the reply.

I am using apollo-server-express

The Config<ExpressContext> is from apollo-server-express, I checked it under apollo-server V3.x

https://github.com/apollographql/apollo-server/commit/928f70906cb881e85caa2ae0e56d3dac61b20df0#diff-823979836b077954e7882625728ee8d656e227666f617f5471088e5cb4408412R42

image
image721×384 47.7 KB

To reproduce the error:

  1. packages
"dependencies": {
    "@graphql-tools/schema": "^8.2.0",
    "@graphql-tools/utils": "^8.2.2",
    "apollo-server-express": "^3.3.0",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "debug": "^4.3.2",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "graphql": "^15.5.3",
    "graphql-import-node": "^0.0.4",
    "graphql-redis-subscriptions": "^2.4.0",
    "graphql-subscriptions": "^1.2.1",
    "helmet": "^4.6.0",
    "lodash": "^4.17.21",
    "morgan": "^1.10.0",
    "subscriptions-transport-ws": "^0.9.19"
  },
  "devDependencies": {
    "@types/chai": "^4.2.21",
    "@types/cookie-parser": "^1.4.2",
    "@types/debug": "^4.1.7",
    "@types/express": "^4.17.13",
    "@types/graphql": "^14.5.0",
    "@types/lodash": "^4.14.172",
    "@types/mocha": "^9.0.0",
    "@types/morgan": "^1.9.3",
    "@types/node": "^16.7.10",
    "@types/supertest": "^2.0.11",
    "@typescript-eslint/eslint-plugin": "^4.30.0",
    "@typescript-eslint/parser": "^4.30.0",
    "chai": "^4.3.4",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "kill-port": "^1.6.1",
    "mocha": "^9.1.1",
    "nodemon": "^2.0.12",
    "pg": "^8.7.1",
    "prettier": "^2.3.2",
    "rimraf": "^3.0.2",
    "supertest": "^6.1.6",
    "ts-node": "^10.2.1",
    "typeorm": "^0.2.37",
    "typescript": "^4.4.2",
    "wait-on": "^6.0.0"
  }
  1. tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "outDir": "./dist",
    "removeComments": true,
    "isolatedModules": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "allowUnusedLabels": false,
    "allowUnreachableCode": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "include": ["src/**/*", "tests/**/*"],
  "exclude": ["node_modules"]
}
  1. coder
import {
    ApolloServerPluginDrainHttpServer,
    ApolloServerPluginLandingPageGraphQLPlayground,
    ApolloServerPluginInlineTrace,
} from 'apollo-server-core';
import http, { Server } from 'http';
import { ApolloServer } from 'apollo-server-express';
import { SubscriptionServer } from 'subscriptions-transport-ws';
import { execute, subscribe } from 'graphql';
import config from './config';
import schema from './graphql';

const httpServer: Server = http.createServer();

const path = '/graphql';

const server = new ApolloServer({
    schema,
    introspection: true,
    debug: config.graphql.debug,
    plugins: [
        {
            async serverWillStart() {
                return {
                    async drainServer() {
                        subscriptionServer.close();
                    },
                };
            },
        },
        ApolloServerPluginDrainHttpServer({ httpServer }),
        ApolloServerPluginLandingPageGraphQLPlayground({}),
        ApolloServerPluginInlineTrace(),
    ],
    context: async () => {
        return {};
    },
});

const subscriptionServer = SubscriptionServer.create(
    {
        schema,
        execute,
        subscribe,
    },
    {
        server: httpServer,
        path,
    },
);

....

Thank you for the support. :slight_smile:

4

Can you provide a git repo or codesandbox to clone? So I don’t have to have any creativity? eg, having the full package-lock/yarn.lock is very very helpful.

5

I do see that you’ve turned on the very new exactOptionalPropertyTypes flag which seems at least vaguely related to the idea of missing optional errors. Does setting that to false in your tsconfig instead of true help? (I don’t see why it would, but maybe?)

6

@glasser Thank you for the support, I think the issue is related to the IDE. if I open/move the project to the root level (or open only that project) the error disappears. however, if I open the project in a subdirectory, I will get the above error. so most probably related to the code editor I am using.