Remix + GraphQL Request

import { GraphQLClient } from "graphql-request";

export const client = new GraphQLClient("http://countries.trevorblades.com");

import { useLoaderData, json, Link } from "remix";
import { gql } from "graphql-request";

import { client } from "~/lib/graphql-client";

const GetAllCountries = gql`
  {
    countries {
      name
      code
    }
  }
`;

export let loader = async () => {
  const { countries } = await client.request(GetAllCountries);

  return json({ countries });
};

export let meta = () => {
  return {
    title: "GraphQL + Remix",
    description: "WTF is GraphQL?",
  };
};

export default function Index() {
  let { countries } = useLoaderData();

  return (
    <div>
      <h1>Remix + GraphQL!</h1>

      <ul>
        {countries.map(({ code, name }) => (
          <li key={code}>
            <Link to={`/countries/${code}`} prefetch="intent">
              {name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useLoaderData, json, redirect } from "remix";
import { gql } from "graphql-request";

import { client } from "~/lib/graphql-client";

const GetCountryByCode = gql`
  query GetCountryByCode($code: ID!) {
    country(code: $code) {
      name
      code
      capital
      currency
    }
  }
`;

export let loader = async ({ params }) => {
  const { code } = params;

  const { country } = await client.request(GetCountryByCode, {
    code,
  });

  return json({ country });
};

export let action = async ({ request }) => {
  let { code } = await request.formData();

  redirect(`/countries/${code}`);
};

export default function CountryPage() {
  let { country } = useLoaderData();

  return (
    <>
      <form method="post" action={`/countries/${country.code}`}>
        <label>
          <input name="code" type="text" placeholder="Country code" />
        </label>
        <button type="submit">Go</button>
      </form>
      <pre>{JSON.stringify(country, null, 2)}</pre>
    </>
  );
}