Unable to set up graphql-scalars

[tsongas]

For some reason I'm not able to get graphql-scalars to work in my setup. I'm using Apollo Server and saw the instructions here https://www.graphql-scalars.dev/docs/usage/apollo-server however when I try to use a scalar type, I get an unkown type error. Here is how I'm combining my type definitions and resolvers:

import { gql } from 'apollo-server-express'
import { mergeResolvers } from '@graphql-tools/merge'

import {
  typeDefs as scalarTypeDefs,
  resolvers as scalarResolvers,
} from 'graphql-scalars'

import {
  typeDef as Authentication,
  resolvers as authenticationResolvers,
} from './authentication'

import {
  typeDef as CalendarAssignment,
  resolvers as calendarAssignmentResolvers,
} from './calendarAssignment'
import {
  typeDef as CalendarException,
  resolvers as calendarExceptionResolvers,
} from './calendarException'
import {
  typeDef as CalendarPosition,
  resolvers as calendarPositionResolvers,
} from './calendarPosition'

import { typeDef as Case, resolvers as caseResolvers } from './case'
import {
  typeDef as CaseAction,
  resolvers as caseActionResolvers,
} from './caseAction'
import {
  typeDef as CaseActionLog,
  resolvers as caseActionLogResolvers,
} from './caseActionLog'
import {
  typeDef as CaseActionLogDocument,
  resolvers as caseActionLogDocumentResolvers,
} from './caseActionLogDocument'
import {
  typeDef as CaseAnswer,
  resolvers as caseAnswerResolvers,
} from './caseAnswer'
import {
  typeDef as CaseAssignment,
  resolvers as caseAssignmentResolvers,
} from './caseAssignment'
import {
  typeDef as CaseDocument,
  resolvers as caseDocumentResolvers,
} from './caseDocument'
import { typeDef as CaseNote, resolvers as caseNoteResolvers } from './caseNote'
import {
  typeDef as CaseQuestion,
  resolvers as caseQuestionResolvers,
} from './caseQuestion'
import {
  typeDef as CaseStatusLog,
  resolvers as caseStatusLogResolvers,
} from './caseStatusLog'
import { typeDef as CaseType, resolvers as caseTypeResolvers } from './caseType'

import {
  typeDef as ChatChannel,
  resolvers as chatChannelResolvers,
} from './chatCannel'
import { typeDef as ChatPost, resolvers as chatPostResolvers } from './chatPost'

import { typeDef as Content, resolvers as contentResolvers } from './content'

import { typeDef as Contract, resolvers as contractResolvers } from './contract'

import { typeDef as Download, resolvers as downloadResolvers } from './download'

import { typeDef as Downtime, resolvers as downtimeResolvers } from './downtime'

import { typeDef as Election, resolvers as electionResolvers } from './election'
import {
  typeDef as ElectionCandidate,
  resolvers as electionCandidateResolvers,
} from './electionCandidate'
import {
  typeDef as ElectionPosition,
  resolvers as electionPositionResolvers,
} from './electionPosition'
import {
  typeDef as ElectionRatification,
  resolvers as electionRatificationResolvers,
} from './electionRatification'
import {
  typeDef as ElectionVote,
  resolvers as electionVoteResolvers,
} from './electionVote'

import { typeDef as Email, resolvers as emailResolvers } from './email'
import {
  typeDef as EmailAttachment,
  resolvers as emailAttachmentResolvers,
} from './emailAttachment'
import {
  typeDef as EmailEvent,
  resolvers as emailEventResolvers,
} from './emailEvent'
import {
  typeDef as EmailRecipient,
  resolvers as emailRecipientResolvers,
} from './emailRecipient'
import {
  typeDef as EmailSearch,
  resolvers as emailSearchResolvers,
} from './emailSearch'
import {
  typeDef as EmailTopic,
  resolvers as emailTopicResolvers,
} from './emailTopic'

import { typeDef as Employee, resolvers as employeeResolvers } from './employee'
import {
  typeDef as EmployeeAssignment,
  resolvers as employeeAssignmentResolvers,
} from './employeeAssignment'
import {
  typeDef as EmployeeHistory,
  resolvers as employeeHistoryResolvers,
} from './employeeHistory'
import {
  typeDef as EmployeeNote,
  resolvers as employeeNoteResolvers,
} from './employeeNote'
import {
  typeDef as EmployeePosition,
  resolvers as employeePositionResolvers,
} from './employeePosition'
import {
  typeDef as EmployeeSearch,
  resolvers as employeeSearchResolvers,
} from './employeeSearch'
import {
  typeDef as EmployeeTag,
  resolvers as employeeTagResolvers,
} from './employeeTag'

import { typeDef as Enum } from './enum'

import { typeDef as Job, resolvers as jobResolvers } from './job'

import { typeDef as Language, resolvers as languageResolvers } from './language'

import { typeDef as Location, resolvers as locationResolvers } from './location'

import {
  typeDef as Membership,
  resolvers as membershipResolvers,
} from './membership'

import {
  typeDef as Organization,
  resolvers as organizationResolvers,
} from './organization'
import {
  typeDef as OrganizationAssignment,
  resolvers as organizationAssignmentResolvers,
} from './organizationAssignment'

import { typeDef as Point, resolvers as pointResolvers } from './point'
import {
  typeDef as PointRedemption,
  resolvers as pointRedemptionResolvers,
} from './pointRedemption'
import {
  typeDef as PointReward,
  resolvers as pointRewardResolvers,
} from './pointReward'

import {
  typeDef as Representative,
  resolvers as representativeResolvers,
} from './representative'

import { typeDef as Setting, resolvers as settingResolvers } from './setting'

import { typeDef as Upload, resolvers as uploadResolvers } from './upload'
import {
  typeDef as UploadError,
  resolvers as uploadErrorResolvers,
} from './uploadError'

const Query = gql`
  type Query {
    _empty: String
  }
`

const Mutation = gql`
  type Mutation {
    _empty: String
  }
`

const Interface = gql`
  interface MutationResponse {
    code: String!
    success: Boolean!
    message: String!
  }
`

export const typeDefs = [
  Query,
  Mutation,
  Interface,
  ...scalarTypeDefs,
  Authentication,
  CalendarAssignment,
  CalendarException,
  CalendarPosition,
  Case,
  CaseAction,
  CaseActionLog,
  CaseActionLogDocument,
  CaseAnswer,
  CaseAssignment,
  CaseDocument,
  CaseNote,
  CaseQuestion,
  CaseStatusLog,
  CaseType,
  ChatChannel,
  ChatPost,
  Content,
  Contract,
  Download,
  Downtime,
  Election,
  ElectionCandidate,
  ElectionPosition,
  ElectionRatification,
  ElectionVote,
  Email,
  EmailAttachment,
  EmailEvent,
  EmailRecipient,
  EmailSearch,
  EmailTopic,
  Employee,
  EmployeeAssignment,
  EmployeeHistory,
  EmployeeNote,
  EmployeePosition,
  EmployeeSearch,
  EmployeeTag,
  Enum,
  Job,
  Language,
  Location,
  Membership,
  Organization,
  OrganizationAssignment,
  Point,
  PointRedemption,
  PointReward,
  Representative,
  Setting,
  Upload,
  UploadError,
]

export const resolvers = mergeResolvers([
  scalarResolvers,
  authenticationResolvers,
  calendarAssignmentResolvers,
  calendarExceptionResolvers,
  calendarPositionResolvers,
  caseResolvers,
  caseActionResolvers,
  caseActionLogResolvers,
  caseActionLogDocumentResolvers,
  caseAnswerResolvers,
  caseAssignmentResolvers,
  caseDocumentResolvers,
  caseNoteResolvers,
  caseQuestionResolvers,
  caseStatusLogResolvers,
  caseTypeResolvers,
  chatChannelResolvers,
  chatPostResolvers,
  contentResolvers,
  contractResolvers,
  downloadResolvers,
  downtimeResolvers,
  electionResolvers,
  electionCandidateResolvers,
  electionPositionResolvers,
  electionRatificationResolvers,
  electionVoteResolvers,
  emailResolvers,
  emailAttachmentResolvers,
  emailEventResolvers,
  emailRecipientResolvers,
  emailSearchResolvers,
  emailTopicResolvers,
  employeeResolvers,
  employeeAssignmentResolvers,
  employeeHistoryResolvers,
  employeeNoteResolvers,
  employeePositionResolvers,
  employeeSearchResolvers,
  employeeTagResolvers,
  jobResolvers,
  languageResolvers,
  locationResolvers,
  membershipResolvers,
  organizationResolvers,
  organizationAssignmentResolvers,
  pointResolvers,
  pointRedemptionResolvers,
  pointRewardResolvers,
  representativeResolvers,
  settingResolvers,
  uploadResolvers,
  uploadErrorResolvers,
])

Here is my server.ts file:

import { config } from 'dotenv'
import { ApolloServer } from 'apollo-server-express'
import { ApolloServerPluginDrainHttpServer } from 'apollo-server-core'
import express, { json } from 'express'
import cors from 'cors'
import http from 'http'
import { makeExecutableSchema } from '@graphql-tools/schema'
import { applyMiddleware } from 'graphql-middleware'
import { Subdomain } from '@prisma/client'
import { baseUrls, jsonPayloadLimit, port, vercelAppURLSuffix } from './config'
import { permissions } from './permissions'
import { typeDefs, resolvers } from './schema'
import {
  getBaseUrl,
  isDevelopment,
  isStaging,
  isTest,
} from '../src/utils/helpers'
import { context } from './utils/context'
import { postmarkWebhook } from './webhooks/postmark'

export const startApolloServer = async (): Promise<any> => {
  config()

  const schema = applyMiddleware(
    makeExecutableSchema({
      typeDefs,
      resolvers,
    }),
    permissions
  )

  const app = express()
  const httpServer = http.createServer(app)
  const server = new ApolloServer({
    schema,
    context,
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
    introspection: true,
    debug: isDevelopment(),
  })

  await server.start()

  const allowedOrigins: cors.CorsOptions['origin'] = [
    'https://studio.apollographql.com',
    getBaseUrl(Subdomain.DASHBOARD) as string,
    getBaseUrl(Subdomain.HUB) as string,
    getBaseUrl(Subdomain.MEMBERSHIP) as string,
  ]

  const isTestEnv = isTest()
  const isStagingEnv = isStaging()

  if (isTestEnv || isStagingEnv) {
    // Allow Vercel feature branch URLs
    allowedOrigins.push(vercelAppURLSuffix)
    // Allow localhost URLs
    if (isStagingEnv) {
      allowedOrigins.push(
        baseUrls.DASHBOARD.DEVELOPMENT,
        baseUrls.HUB.DEVELOPMENT,
        baseUrls.MEMBERSHIP.DEVELOPMENT
      )
    }
  }

  const corsOptions: cors.CorsOptions = {
    origin: allowedOrigins,
    methods: 'GET,POST,OPTIONS',
    preflightContinue: false,
    optionsSuccessStatus: 204,
  }

  app.use(
    '/graphql',
    (_, __, next) => {
      next()
    },
    cors(corsOptions),
    json({ limit: jsonPayloadLimit })
  )

  app.post('/webhook/postmark', express.json(), (req, res) => {
    postmarkWebhook(req, res)
  })

  server.applyMiddleware({
    app,
  })

  await new Promise<void>((resolve) => httpServer.listen({ port }, resolve))
  console.log(`🚀 Server ready at http://localhost:${port}`)
  return { server, app }
}

One thing I noticed is that when I try to spread scalarResolvers into the array I'm passing to mergeResolvers() which is @graphql-tools/merge I'm getting a TS error saying Type 'Record<string, GraphQLScalarType<unknown, unknown>>' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488). Any help appreciated!

[ardatan]

resolvers is exported as an object, not an array so you cannot spread into an array but use it as an element of it.

[tsongas]

Thanks for the reply, however that's what I tried above (used scalarResolvers as an element of the array passed to mergeResolvers()).

I've actually realized, Apollo Server is running so I think the scalars are working there, it's GraphQL Code Generator that's throwing the error because in my codegen.yml file I've got schema: './src/schema/**/*.ts' which of course is not going to find the graphql-scalars dependency in node-modules. Any suggestions for how I can get GraphQL Code Generator to see graphql-scalars?

[tsongas]

I posted 7572 in the graphql-code-generator repo since that seems more appropriate.