feat: genql (#85)

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# generated
+.generated
+
 # dependencies
 /node_modules
 /.pnp

next-env.d.ts

@@ -1,2 +1,9 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+
+declare module "*.graphql" {
+  import { DocumentNode } from "graphql";
+  const Schema: DocumentNode;
+
+  export = Schema;
+}

next.config.js

@@ -1,4 +1,6 @@
-module.exports = {
+const withGraphQL = require('next-plugin-graphql');
+
+module.exports = withGraphQL({
   reactStrictMode: true,
   productionBrowserSourceMaps: true,
   publicRuntimeConfig: {
@@ -25,4 +27,4 @@ module.exports = {
       destination: process.env.STREAM_PROXY
     }];
   }
-};
+});

package.json

@@ -4,21 +4,21 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
     "start": "next start",
-    "generate": "gqless generate"
+    "next:build": "next build",
+    "build": "run-s generate next:build",
+    "generate": "genql -s src/graphql/schema.graphql -o .generated/genql"
   },
   "dependencies": {
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
     "@geist-ui/react-icons": "^1.0.0",
-    "@gqless/react": "^1.0.0-alpha.31",
+    "@genql/runtime": "2.5.0",
     "@next/plugin-google-analytics": "^10.0.6",
     "@next/plugin-sentry": "ricardocasares/next-plugin-sentry",
     "@vercel/fetch": "^6.1.0",
     "apollo-server-micro": "^2.21.2",
     "debounce": "^1.2.1",
-    "gqless": "^1.0.0-alpha.31",
     "graphql": "^15.5.0",
     "next": "^10.0.6",
     "next-seo": "^4.20.0",
@@ -27,13 +27,16 @@
     "react": "^17.0.0",
     "react-content-loader": "^6.0.2",
     "react-dom": "^17.0.0",
-    "styled-system": "^5.1.5"
+    "styled-system": "^5.1.5",
+    "swr": "^0.5.3"
   },
   "devDependencies": {
-    "@gqless/cli": "^1.0.0-alpha.33",
+    "@genql/cli": "2.5.0",
     "@types/node": "^14.14.35",
     "@types/react": "^17.0.3",
     "@types/styled-system": "^5.1.10",
+    "next-plugin-graphql": "^0.0.2",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "testcafe": "^1.12.0",
     "typescript": "^4.2.3"

src/components/Placeholder/index.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { AutoGrid } from '@/components/AutoGrid';
+import { CardSkeleton } from '@/components/Skeleton';
+
+export type Placeholder = { count?: number; };
+
+export const Placeholder: FC<Placeholder> = ({ count = 10 }) => (
+  <AutoGrid gridGap={[20]}>
+    {Array(count).fill(null).map((i) => <CardSkeleton key={`${i}-skeleton`} />)}
+  </AutoGrid>
+);

src/components/StationCardList/index.tsx

@@ -1,28 +1,17 @@
-import { FC, memo } from "react";
-import { graphql } from "@gqless/react";
-import { query, Station, StationSearchInput } from "@/lib/graphql/gqless";
-import { NoSSR } from "@/components/NoSSR";
+import { FC } from "react";
 import { Card } from "@/components/Card";
 import { AutoGrid } from "@/components/AutoGrid";
-import { CardSkeleton } from "@/components/Skeleton";
+import { Placeholder } from "@/components/Placeholder";
 import { usePlayer } from "@/lib/hooks/usePlayer";
-import { useFavorites } from "@/lib/hooks/useFavorites";
+import { useFavorites } from '@/lib/hooks/useFavorites';
+import { Station, StationSearchInput } from "@/graphql";
+import { useStations, useStationsByUUID } from '@/graphql/hooks';
 
-const Placeholder = () => (
-  <AutoGrid gridGap={[20]}>
-    <CardSkeleton />
-    <CardSkeleton />
-    <CardSkeleton />
-    <CardSkeleton />
-    <CardSkeleton />
-  </AutoGrid>
-);
-
-export interface CardList {
+export type CardList = {
   list: Station[];
-}
+};
 
-export const CardList: FC<CardList> = memo(({ list }) => {
+export const CardList: FC<CardList> = ({ list }) => {
   const { load } = usePlayer();
   const { add, remove, isFaved } = useFavorites();
 
@@ -42,40 +31,24 @@ export const CardList: FC<CardList> = memo(({ list }) => {
       ))}
     </AutoGrid>
   );
-});
+};
+
+export const StationCardList: FC<StationSearchInput> = (props) => {
+  const { data, error } = useStations(props, { name: true, url: true, country: true, stationuuid: true });
+
+  if (!data) return <Placeholder />;
+  if (error) return <p>Error</p>;
+
+  return <CardList list={data.stations} />;
+};
+
+export type StationCardFavs = { uuids: string[]; };
 
-const withLoader = <P extends object>(
-  Component: React.ComponentType<P>
-): React.FC<P> => (props) => (
-  <NoSSR fallback={<Placeholder />}>
-    <Component {...(props as P)} />
-  </NoSSR>
-);
+export const StationCardFavs: FC<StationCardFavs> = ({ uuids }) => {
+  const { data, error } = useStationsByUUID(uuids, { name: true, stationuuid: true });
 
-export const StationCardList: FC<StationSearchInput> = withLoader(
-  graphql(({ ...search }) => (
-    <CardList
-      list={query.stations({ search }).map((s) => ({
-        ...s,
-        url: s.url,
-        name: s.name,
-        country: s.country,
-        stationuuid: s.stationuuid,
-      }))}
-    />
-  ))
-);
+  if (!data && !error) return <Placeholder />;
+  if (error) return <p>Error</p>;
 
-export const StationCardFavs: FC<{ uuids: string[] }> = withLoader(
-  graphql(({ children: _, ...props }) => (
-    <CardList
-      list={query.stationsByUUID(props).map((s) => ({
-        ...s,
-        url: s.url,
-        name: s.name,
-        country: s.country,
-        stationuuid: s.stationuuid,
-      }))}
-    />
-  ))
-);
+  return <CardList list={data.stationsByUUID} />;
+};

src/graphql/hooks/index.ts

@@ -0,0 +1,24 @@
+import useSWR from "swr";
+import {
+  client,
+  everything,
+  StationRequest,
+  StationSearchInput,
+} from "@/graphql";
+
+export function useStations(
+  search: StationSearchInput,
+  station: StationRequest = everything
+) {
+  const fetcher = () => client.query({ stations: [{ search }, station] });
+  return useSWR(JSON.stringify({ search, station }), fetcher);
+}
+
+export function useStationsByUUID(
+  uuids: string[],
+  station: StationRequest = everything
+) {
+  const fetcher = (uuids: string[]) =>
+    client.query({ stationsByUUID: [{ uuids }, station] });
+  return useSWR([uuids], fetcher);
+}

src/graphql/index.ts

@@ -0,0 +1,3 @@
+export * from "@/genql";
+import { createClient } from "@/genql";
+export const client = createClient({ url: "/api/graphql" });

src/graphql/schema.graphql

@@ -0,0 +1,29 @@
+type Query {
+  stations(search: StationSearchInput): [Station!]!
+  stationsByUUID(uuids: [String!]!): [Station!]!
+}
+
+enum StationOrder {
+  NAME
+  VOTES
+}
+
+type Station {
+  name: String!
+  url: String!
+  votes: Int!
+  favicon: String!
+  homepage: String!
+  language: String!
+  country: String!
+  stationuuid: String!
+}
+
+input StationSearchInput {
+  name: String
+  limit: Int = 10
+  reverse: Boolean = true
+  order: StationOrder = VOTES
+  country: String
+  language: String
+}

src/lib/context/player.tsx

@@ -5,7 +5,7 @@ import {
   SetStateAction,
   Dispatch,
 } from "react";
-import { Station } from "@/lib/graphql/gqless";
+import { Station } from "@/graphql";
 
 export interface PlayerState {
   error: boolean;