Add TypeScript definitions

[gpbaculio]

i am thinking of using this for routing but there's no @types/found-relay?

[taion]

There isn't really enough of an API here for that integration, to be honest. The exported Resolver only takes a Relay environment. Otherwise the routes are flexible enough that it's hard to get much type safety, plus we'd have to deal with overriding upstream routes (and that's only if we're using JSX routes).

We are using TS fairly extensively now, but aren't doing much in the way of route type checking for now.

[taion]

And I think most of the type checking that you would need on routes is available from the base Found types.

[BorisTB]

For example you can create a file src/types/found-relay/index.d.ts and copy paste this into that file:

declare module 'found-relay' {
  const Resolver: any
  export { Resolver }
}

[taion]

Right – ideally we could come up with a better type for routes here, though.

[BorisTB]

I would love to help if you give me some instructions, I never added types to library, but this is what I use, not sure if it helps or if it's 100% correct. And I have no idea how to add fields to RouteRenderArgs based on query prop

import { BaseRouteConfig, Params, RouteMatch, RouteRenderArgs } from 'found'
import { GraphQLTaggedNode, CacheConfig, Environment } from 'relay-runtime'
import { DataFrom } from 'react-relay'

declare module 'found-relay' {
  const Resolver: any
  export { Resolver }
}

declare module 'found' {
  export interface RouteRenderArgs {
    environment?: Environment
    error?: Error
    resolving?: boolean
    variables?: Params
    retry?: () => void
  }

  export interface BaseRouteConfig {
    cacheConfig?: CacheConfig
    dataFrom?: DataFrom
    query?: GraphQLTaggedNode
    getCacheConfig? (): CacheConfig
    getQuery? (): GraphQLTaggedNode
    prepareVariables? (variables: Params, routeMatch: RouteMatch): object
  }
}

[taion]

Ugh, unfortunately I don't think there's a good way to add types here. <Route> in the parent is not actually parametrized, so we at least couldn't make things work reasonably with the JSX route configs, unless I'm missing something (as we'd have to parametrize on the query).

[emwalker]

During a conversion of a project I'm working on from Flow to TypeScript, the Found router has been the most challenging piece, and found-relay is adding additional complication. I'm sure the maintainers are busy, but I thought this observation might be helpful input to prioritization.

[kushwahashiv]

any luck on this

[emwalker]

It looks like I ended up putting found-relay in src/declarations.d.ts:

declare module '*.css';
declare module '*.scss';
declare module 'draft-js-single-line-plugin';
declare module 'react-async-ssr';
declare module 'found-relay';
declare module 'react-responsive-hoc';
declare module 'es6-promise-debounce';
declare module 'draft-js-mention-plugin';
declare module 'draft-js-plugins-editor';

In the end, it wasn't that hard to get things working. Eventually it will be nice to have the types for found-relay, but I can understand the technical challenge.