Typescript error

[puchm]

Hi,

This is how I am using found-relay:

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { Router } from './Router';
import { RelayEnvironment } from './setup/relay';
import { Resolver } from 'found-relay'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Router resolver={new Resolver(RelayEnvironment)}/>
  </React.StrictMode>
);

Router.tsx

import { BrowserProtocol, queryMiddleware } from 'farce';
import { createFarceRouter, createRender, makeRouteConfig, Route } from 'found';
import { HomePageView } from './views/HomePageView';

export const Router = createFarceRouter({
    historyProtocol: new BrowserProtocol(),
    historyMiddlewares: [queryMiddleware],
    routeConfig: makeRouteConfig(
        <Route
            path="/"
            Component={HomePageView}
        >

        </Route>
    ),

    render: createRender({})
})

My Relay environment is configured pretty much as documented in Relay's getting started docs:

setup/relay.ts

import { Variables } from 'react-relay';
import { Environment, Network, RecordSource, RequestParameters, Store } from 'relay-runtime';
import { Config } from '../config';
import { getSession } from '../session/getSession';

export async function fetchGraphQL(text: string, variables: Record<string, string>) {
    const session = getSession();

    const response = await fetch(Config.GRAPHQL_URL_HTTPS, {
        method: 'POST',
        headers: {
            Authorization: `Bearer ${session.token}`
        },
        body: JSON.stringify({
            query: text,
            variables
        })
    });

    return await response.json();
}

async function fetchRelay(params: RequestParameters, variables: Variables) {
    if(!params.text) {
        throw new Error('Operation text cannot be empty.');
    }

    console.log(`fetching query ${params.name} with ${JSON.stringify(variables)}`);
    return fetchGraphQL(params.text, variables);
}

export const RelayEnvironment = new Environment({
    network: Network.create(fetchRelay),
    store: new Store(new RecordSource())
})

I am getting two typescript errors in index.tsx:

At RelayEnvironment (the arg for Resolver):

Argument of type 'import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/store/RelayModernEnvironment").default' is not assignable to parameter of type 'import("C:/Users/.../client/node_modules/found-relay/node_modules/@types/relay-runtime/lib/store/RelayModernEnvironment").default'.
  The types of 'getStore().check' are incompatible between these types.
    Type '(operation: OperationDescriptor, options?: import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/store/RelayStoreTypes").CheckOptions | undefined) => import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/store/RelayStoreTypes...' is not assignable to type '(operation: OperationDescriptor, options?: import("C:/Users/.../client/node_modules/found-relay/node_modules/@types/relay-runtime/lib/store/RelayStoreTypes").CheckOptions | undefined) => import("C:/Users/.../client/node_modules/found-relay/node_modu...'.
      Types of parameters 'operation' and 'operation' are incompatible.
        Type 'OperationDescriptor' is not assignable to type 'OperationDescriptor'. Two different types with this name exist, but they are unrelated.
          The types of 'fragment.node.metadata' are incompatible between these types.
            Type '{ readonly connection?: readonly import("C:/Users/.../client/node_modules/found-relay/node_modules/@types/relay-runtime/lib/handlers/connection/ConnectionHandler").ConnectionMetadata[] | undefined; readonly mask?: boolean | undefined; readonly plural?: boolean | undefined; readonly ...' is not assignable to type '{ readonly connection?: readonly import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/handlers/connection/ConnectionHandler").ConnectionMetadata[] | undefined; readonly mask?: boolean | undefined; readonly plural?: boolean | undefined; readonly refetch?: import("C:/User...'.
              Type '{ readonly connection?: readonly import("C:/Users/.../client/node_modules/found-relay/node_modules/@types/relay-runtime/lib/handlers/connection/ConnectionHandler").ConnectionMetadata[] | undefined; readonly mask?: boolean | undefined; readonly plural?: boolean | undefined; readonly ...' is not assignable to type '{ readonly connection?: readonly import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/handlers/connection/ConnectionHandler").ConnectionMetadata[] | undefined; readonly mask?: boolean | undefined; readonly plural?: boolean | undefined; readonly refetch?: import("C:/User...'.
                Types of property 'refetch' are incompatible.
                  Type 'import("C:/Users/.../client/node_modules/found-relay/node_modules/@types/relay-runtime/lib/util/ReaderNode").ReaderRefetchMetadata | undefined' is not assignable to type 'import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/util/ReaderNode").ReaderRefetchMetadata | undefined'.
                    Type 'import("C:/Users/.../client/node_modules/found-relay/node_modules/@types/relay-runtime/lib/util/ReaderNode").ReaderRefetchMetadata' is not assignable to type 'import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/util/ReaderNode").ReaderRefetchMetadata'.
                      Types of property 'operation' are incompatible.
                        Type 'string | import("C:/Users/.../client/node_modules/found-relay/node_modules/@types/relay-runtime/lib/util/RelayConcreteNode").ConcreteRequest' is not assignable to type 'string | import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/util/RelayConcreteNode").ConcreteRequest'.
                          Type 'ConcreteRequest' is not assignable to type 'string | ConcreteRequest'.
                            Type 'import("C:/Users/.../client/node_modules/found-relay/node_modules/@types/relay-runtime/lib/util/RelayConcreteNode").ConcreteRequest' is not assignable to type 'import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/util/RelayConcreteNode").ConcreteRequest'.
                              The types of 'operation.selections' are incompatible between these types.
                                Type 'readonly import("C:/Users/.../client/node_modules/found-relay/node_modules/@types/relay-runtime/lib/util/NormalizationNode").NormalizationSelection[]' is not assignable to type 'readonly import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/util/NormalizationNode").NormalizationSelection[]'.
                                  Type 'import("C:/Users/.../client/node_modules/found-relay/node_modules/@types/relay-runtime/lib/util/NormalizationNode").NormalizationSelection' is not assignable to type 'import("C:/Users/.../client/node_modules/@types/relay-runtime/lib/util/NormalizationNode").NormalizationSelection'.
                                    Type 'NormalizationCondition' is not assignable to type 'NormalizationSelection'.ts(2345)

At resolver=:

Type 'import("C:/Users/.../client/node_modules/found-relay/lib/Resolver").default' is not assignable to type 'import("C:/Users/.../client/node_modules/found/index").Resolver'.
  The types returned by 'resolveElements(...)[Symbol.asyncIterator]().next(...)' are incompatible between these types.
    Type 'Promise<IteratorResult<any[] | undefined, void>>' is not assignable to type 'Promise<IteratorResult<ResolvedElement[], any>>'.
      Type 'IteratorResult<any[] | undefined, void>' is not assignable to type 'IteratorResult<ResolvedElement[], any>'.
        Type 'IteratorYieldResult<any[] | undefined>' is not assignable to type 'IteratorResult<ResolvedElement[], any>'.
          Type 'IteratorYieldResult<any[] | undefined>' is not assignable to type 'IteratorYieldResult<ResolvedElement[]>'.
            Type 'any[] | undefined' is not assignable to type 'ResolvedElement[]'.
              Type 'undefined' is not assignable to type 'ResolvedElement[]'.ts(2322)
index.d.ts(460, 3): The expected type comes from property 'resolver' which is declared here on type 'IntrinsicAttributes & ConnectedRouterProps'

I am using the following versions:

"farce": "^0.4.5",
"found": "^1.1.1",
"found-relay": "^1.0.1",
"react-relay": "^13.2.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"

Am I doing something wrong? I have tried various type casts but I have not gotten it to work.

[puchm]

@jquense I am tagging you here since I saw you did the recent conversion to Typescript - maybe you can help?

[tslater]

@puchm , I'm having the same error, and can't get things up and running. Is it just a TS error for you? (i.e. can you get around it with a // @ts-ignore?

[puchm]

Yes, I got around it by ignoring the error. Worked fine for me on a decently big project. If you are running React 18 you also need to run in React 17 compatible mode because of an issue with found itself, see 4Catalyzer/found#968

[jquense]

i've updated found-relay to have a peer dep on these types, so this should happen anymore

[minhdtb]

same issue here