2

I am new to using Typescript and finding there is a mismatch in how the types are being handled from the GraphQL schema and types generated via Relay.

Here is an example:

# in schema.graphql
"""
columns and relationships of "businesses"
"""
type businesses implements Node {
  businessId: bigint!
  name: String!
}
// in __generated__/Business_business.graphql
export type Business_business = {
    readonly name: string;
    readonly businessId: unknown;
    readonly " $refType": "Business_business";
};
export type Business_business$data = Business_business;
export type Business_business$key = {
    readonly " $data"?: Business_business$data;
    readonly " $fragmentRefs": FragmentRefs<"Business_business">;
};
const BusinessFragment = graphql`
  fragment Business_business on businesses {
    name
    businessId
  }
`

type Props = {
  fragmentRef: Business_business$key
}

const Business = ({ fragmentRef }: Props) => {
  const business = useFragment(BusinessFragment, fragmentRef)
  return (
    <div>
      <p>my html!</>
      {/* I get the error: Type 'unknown' is not assignable to type 'number' for businessId */}
      <ChildComponent businessId={business.businessId} />
    </div>
  )
}

interface Props {
  businessId: number
}

const ChildComponent = ({ businessId }: Props) => {

  return (
    <p>my business id: {businessId}</p>
  )
}

Is there additional config I need to do to have Relay understand the Hasura types? I have followed the example via the relay docs.

I have the assumption that Relay is not compiling bigint to number.


Update

I have changed the column type in Hasura from bigint to Int and this solved the problem. Is there a way to tell Relay how to match types it is unfamiliar with? In this case cast bigint to number is totally fine.

2 Answers 2

1

Answer to your Update: You can add customScalars within your relay.config.js. I'm also using Hasura and this is what I've set up:

module.exports = {
  // ... your other configs
  customScalars: {
    uuid: 'string',
    int8: 'string',
    bigint: 'string',
    numeric: 'number',
    varbit: 'string',
    bit: 'string',
    char: 'string',
    varchar: 'string',
    bool: 'boolean',
    int: 'number',
    int4: 'number',
    float8: 'number',
    timestamptz: 'string',
    timetz: 'string',
    jsonb: 'Record<string, unknown>',
    _text: 'string',
    date: 'string',
  }
};
Sign up to request clarification or add additional context in comments.

Comments

0
  1. Did you import the type from // in __generated__/Business_business.graphql ?

  2. Is there a typo ?? what is $key appended to the typename ?

    type Props = {
      fragmentRef: Business_business$key
    }
    

1 Comment

I have updated the question to make this import more clear.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.