How can you retrieve a date field in Apollo Client from a query as a Date and not a string?

user_365985 0
Viewed 3041

Using the following graphql:

scalar Date

type MyModel {
  id: ID!
  date: Date!
}

query MyModels {
  myModels {
    id
    date
  }
}

type Query {
  myModel: [MyModel!]
}

and resolvers:

import { DateTimeResolver } from 'graphql-scalars'
const resolvers = {
  // Scalars
  Date: DateTimeResolver,

  myModels: async () => {
    return await context.user.getMyModels()
  }
}

My query returns date: "2021-02-07T06:58:51.009Z". Is it possible to have Apollo Client convert it to a Date object instead?

apollo-client react-apollo apollo graphql
1 Answers

Figured it out using apollo-link-scalars:

import {
  ApolloClient,
  InMemoryCache,
  HttpLink,
  ApolloLink,
} from '@apollo/client'
import introspectionResult from 'shared/gql/generated.schema.json'
import { buildClientSchema, IntrospectionQuery } from 'graphql'
import { withScalars } from 'apollo-link-scalars'
import { DateTimeResolver } from 'graphql-scalars'

const schema = buildClientSchema(
  (introspectionResult as unknown) as IntrospectionQuery
)

const httpLink = new HttpLink({
  uri: 'http://localhost:4000',
  credentials: 'include',
})

const typesMap = {
  DateTime: DateTimeResolver,
}
const link = ApolloLink.from([
  (withScalars({ schema, typesMap }) as unknown) as ApolloLink,
  httpLink,
])

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    link,
    // TODO: Save and hydrate from localStorage
    cache: new InMemoryCache(),
    // Necessary to pass the session cookie to the server on every request
    credentials: 'include',
  })
}

I looked at my generated schema and found that the scalar was being called DateTime instead of Date so I changed the typeMap to DateTime: DateTimeResolver and it's working.

user_3659850
Related