graphql-apollo-react

AllFilms.tsx

import { useQuery } from '@apollo/client';
import { Link } from 'react-router-dom';
import { ALL_FILMS_QUERY } from '../queries/films';

const AllFilms: React.FC<any> = () => {
    const { data, loading, error } = useQuery(ALL_FILMS_QUERY);

    if (loading) return "Loading...";
    if (error) return <pre>{error.message}</pre>

    return (
        <div className="row">
            {
                data.allFilms.films.map((film: any, index: number) => (
                    <div className="col-md-4 col-12 my-3" key={index}>
                        <div className='card p-4'>
                            <h5>{film.title}</h5>
                            <p className='mb-0'>Director: {film.director}</p>
                            <p className='mb-3'>Released At: {film.releaseDate}</p>

                            <Link to={`/film-detail/${film.id}`} className='btn btn-success'>View Details</Link>
                        </div>
                    </div>
                ))
            }
        </div>
    );
};

export default AllFilms;

config.ts

export const starWarsAPI: string = 'https://swapi-graphql.netlify.app/.netlify/functions/index';

FilmDetails.tsx

import { useQuery } from '@apollo/client';
import React from 'react';
import { useParams } from 'react-router-dom';
import { SINGLE_FILM_QUERY } from '../queries/films';

const FilmDetails: React.FC<any> = () => {
    const { id } = useParams();

    const { data, loading, error } = useQuery(SINGLE_FILM_QUERY, {
        variables: {
            filmId: id
        }
    });

    if (loading) return "Loading...";
    if (error) return <pre>{error.message}</pre>

    return (
        <div>
            {
                data?.film?.id ?
                    (<div>
                        <h2>{data?.film?.title}</h2>
                        <p><strong>Released At:</strong> {data?.film?.releaseDate}</p>
                        <p><strong>Director:</strong> {data?.film?.director}</p>
                        <p><strong>Opening Crawl:</strong> {data?.film?.openingCrawl}</p>
                        <p><strong>Producers:</strong> {data?.film?.producers.toString()}</p>
                    </div>)
                    :
                    (<p>{error}</p>)
            }
        </div>
    );
};

export default FilmDetails;

films.ts

import { gql } from "@apollo/client";

export const ALL_FILMS_QUERY = gql`
    query {
        allFilms {
            films {
                id
                title
                director
                releaseDate
            }
        }
    }
`;

export const SINGLE_FILM_QUERY = gql`
  query Film($filmId: ID!) {
    film(id: $filmId) {
      id
      title
      created
      director
      producers
      releaseDate
      openingCrawl
      episodeID
    }
  }
`;

main.ts

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

import { starWarsAPI } from './core/config.ts'
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  uri: starWarsAPI,
  cache: new InMemoryCache()
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>
  </React.StrictMode>,
)