continents-graphql-list.tsx

import { component$, Resource, useResource$ } from '@builder.io/qwik';
import { countriesGraphQLAPI } from '~/api/countries-data';

export default component$(() => {
  const continentsListResource = useResource$<any>(({ cleanup }) => {
    const controller = new AbortController();
    cleanup(() => controller.abort());

    return countriesGraphQLAPI(
      {
        query: `
        {
            continents {
              code
              name
            }
          }
        `,
      },
      controller
    );
  });

  return (
    <>
      <h1>Countries</h1>
      <Resource
        value={continentsListResource}
        onPending={() => <div>Loading...</div>}
        onRejected={() => <div>Failed to load continents list data</div>}
        onResolved={({ continents }) => {
          return continents.length ? (
            <ul>
              {continents.map((continent: any) => (
                <li>
                  Code: {continent.code} / Name: {continent.name}
                </li>
              ))}
            </ul>
          ) : (
            <p>Sin resultados</p>
          );
        }}
      />
    </>
  );
});