Graphql React Typescript error binding element 'currency' implicitly has an 'any' type

Question

I have case like this. I wanna use EXCHANGE_RATES into renderedExchangeRates, but i have got error "Error Message: Binding element 'currency' implicitly has an 'any' type." I know its about type declaration but idont know how to write it correctly on data.rates.map(({ currency, rate }) => (...)).

 This is home functional component....

         const { loading, error, data } = useQuery(EXCHANGE_RATES);
         const renderedExchangeRates = data.rates.map(({ currency, rate }) => (
            <div key={currency}>
              <p>
                {currency}: {rate}
              </p>
            </div>
          ));

         return (
         ...)

Error Message: Binding element 'currency' implicitly has an 'any' type.

My EXCHANGE_RATES:

import {
  ApolloClient,
  InMemoryCache,
  gql,
} from "@apollo/client";

export const client = new ApolloClient({
  uri: "https://48p1r2roz4.sse.codesandbox.io",
  cache: new InMemoryCache(),
});

export const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`;

Thankyou for your attention.

Answer 1

It is a check of the typescript compiler. In the tsconfig.json file, you could change the line

"noImplicitAny": true

In case you want to bypass handle the type check

data.rates.map(({ currency, rate }: { currency: any, rate: any })