gql Query typs

[Seraphits]

Trying to make a query is react using gql.  getting a type error from typescript.  

ERROR in src/Components/Pages/Languages/LanguagesPage.tsx:38:21
TS2322: Type '{ languages: any; }' is not assignable to type 'IntrinsicAttributes & ChildProps'.
Property 'languages' does not exist on type 'IntrinsicAttributes & ChildProps'.
36 | ))}
37 | </ul> */}
> 38 | <LanguageTile languages={data.languages} />
| ^^^^^^^^^
39 | </main>
40 | );
41 | };

import { LanguageTile } from '@/Components/Reusables/LanguageTile';
import React from 'react';
import { gql, useQuery } from '@apollo/client';

// const languages = [
//   { id: 'tabla', name: 'Tabla' },
//   { id: 'english', name: 'English' },
//   { id: 'hindi', name: 'Hindi' }
// ];

const GET_LANGUAGES_QUERY = gql`
  query Query {
    languages {
      languageId
      name
    }
  }
`;

export const LanguagesPage: React.FC = () => {
  const { loading, error, data } = useQuery(GET_LANGUAGES_QUERY);

  if (error) return <p>Error Getting Data</p>;
  if (loading) return <p>Loading</p>;

  return (
    <main>
      <div>current Language:</div>
      <h1>Which Language do you want to Learn?</h1>
      {/* <ul> */}
      {/* <LanguagesList languages={LANGUAGES} /> */}
      {/* {languages.map((language) => (
          <li key={language.id}>
            <LanguageTile link={language.id} title={language.name} />
          </li>
        ))}
      </ul> */}
      <LanguageTile languages={data.languages} />
    </main>
  );
};

     @William_Lyon  #GrandStack #reactjs #apollo #gql #useQuery #typescript 

[Seraphits]

LanguageTile.tsx

import React from 'react';
import { Link } from 'react-router-dom';

interface ChildProps {
  link: string;
  title: string;
}

export const LanguageTile: React.FC<ChildProps> = ({ link, title }) => {
  return (
    <div>
      <Link to={`/langauges/${link}`}>{title}</Link>
    </div>
  );
};

[Seraphits]

I also tried changing it to 

import { LanguageTile } from '@/Components/Reusables/LanguageTile';
import React from 'react';
import { gql, useQuery } from '@apollo/client';

const GET_LANGUAGES_QUERY = gql`
  query Query {
    languages {
      languageId
      name
    }
  }
`;

export const LanguagesPage: React.FC = () => {
  const { loading, error, data } = useQuery(GET_LANGUAGES_QUERY);

  if (error) return <p>Error Getting Data</p>;
  if (loading) return <p>Loading</p>;

  return (
    <main>
      <div>current Language:</div>
      <h1>Which Language do you want to Learn?</h1>
      <ul>
        {data.languages.map((language) => (
          <li key={language.languageId}>
            <LanguageTile link={language.languageId} title={language.name} />
          </li>
        ))}
      </ul>
    </main>
  );
};

Still get the same error 

[Seraphits]

ERROR in src/Components/Pages/Languages/LanguagesPage.tsx:39:30
TS7006: Parameter 'language' implicitly has an 'any' type.
37 | </ul> */}
38 | <ul>
> 39 | {data.languages.map((language) => (
| ^^^^^^^^
40 | <li key={language.languageId}>
41 | <LanguageTile link={language.languageId} title={language.name} />
42 | </li>

[Seraphits]

tried

  <ul>
        {data.languages.map((language: []) => (
          <li key={language.languageId}>
            <LanguageTile link={language.languageId} title={language.name} />
          </li>
        ))}
      </ul>

getting 

S2339: Property 'name' does not exist on type '[]'.
    39 |         {data.languages.map((language: []) => (
    40 |           <li key={language.languageId}>
  > 41 |             <LanguageTile link={language.languageId} title={language.name} />
       |                                                                      ^^^^
    42 |           </li>
    43 |         ))}
    44 |       </ul>