Generating .tsx files will result in broken .d.ts files

[alber70g]

Reproduce steps

1. create-react-app with template graphql
2. add dependencies for @graphql-codegen/typescript-react-query
3. modify .graphql-let.yml and add schema.graphqls
4. modify .graphql-let.yml to change typescript-react-apollo to typescript-react-query
5. run graphql-let

Automated steps

npx create-react-app wrong-dts-react-query --template graphql
cd wrong-dts-react-query
yarn add @graphql-codegen/typescript-react-query
echo "type Query { rates(currency: String!): ExchangeRate!  } type ExchangeRate { currency: String!  rate: Int!	}" >> schema.graphqls
sed -i -e "s/\${REACT_APP_GRAPHQL_ENDPOINT}/schema\.graphqls/" ./.graphql-let.yml
sed -i -e 's/typescript-react-apollo/typescript-react-query/' .graphql-let.yml
./node_modules/.bin/graphql-let

Expected

node_modules/@types/graphql-let/__generated__/src/App-GetRates-Partial.d.ts:21
to contain useQuery-hook types

Actual

export declare const useGetRatesQuery: JSX.Element;

Problem

Using the .tsx instead of .ts, the generation of typescript definitions goes wrong. Typescript thinks this is a JSX.Element because it's written like shown below and in the screenshot

export const useGetRatesQuery = <TData = GetRatesQuery, TError = unknown>(
// etc
)

Solution

1. Change to function instead of lambda

   export const useGetRatesQuery = function <TData = GetRatesQuery, TError = unknown>(

2. Don't use .tsx but .ts when generics are present.