Added many more exercises

Author: mattpocock

package-lock.json

@@ -143,13 +143,15 @@
     "s-64": "tt-cli run 64 --solution"
   },
   "dependencies": {
+    "@tanstack/react-query": "^4.29.12",
     "@types/express": "^4.17.13",
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.2.4",
     "express": "^4.18.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.3",
+    "react-select": "^5.7.3",
     "zod": "^3.17.10"
   }
 }

package.json

@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import { Equal, Expect } from "../helpers/type-utils";
+
+interface User {
+  fullName: string;
+  job: string;
+}
+
+const getUser = async (): Promise<User> => {
+  return Promise.resolve({
+    fullName: "Matt Pocock",
+    job: "Developer",
+  });
+};
+
+/**
+ * A bit of a hint to start with. useQuery has a LOT of overloads - but a lot
+ * of them are disappearing in the next major version. The ones that'll be
+ * sticking around are the first three.
+ *
+ * 1. How are the first three overloads different to the others? Put differently,
+ * what's the thing that's similar about the first three that's different to
+ * the other six?
+ */
+
+useQuery;
+// ^ CMD+click on this to see the overloads
+
+/**
+ * 2. When you provide queryFn to useQuery, the type of query.data is inferred
+ * as the return type of queryFn. Why is that?
+ */
+const query1 = useQuery({
+  queryFn: getUser,
+});
+
+// Without initialData, the type of query1.data is User | undefined
+type test1 = Expect<Equal<typeof query1.data, User | undefined>>;
+
+/**
+ * 3. When you provide initialData to useQuery, the type of query.data no longer
+ * has undefined in it. Why is that?
+ */
+const query2 = useQuery({
+  queryFn: getUser,
+  initialData: {
+    fullName: "",
+    job: "",
+  },
+});
+
+// WITH initialData, the type of query.data is just User
+type test2 = Expect<Equal<typeof query2.data, User>>;

src/08-external-libraries/61-react-query.explainer.ts

@@ -0,0 +1,46 @@
+import {
+  QueryFunctionContext,
+  QueryKey,
+  useQuery,
+} from "@tanstack/react-query";
+import { useAuthToken } from "fake-external-lib";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const useApi = (
+  queryKey: any[],
+  queryFn: (key: any, token: string) => Promise<any>,
+) => {
+  const token = useAuthToken();
+
+  return useQuery({
+    queryFn: (ctx) => queryFn(ctx, token),
+    queryKey,
+  });
+};
+
+// If you pass in an array of strings to queryFn, the type of ctx.queryKey
+// should be string[]
+const query = useApi(["users"], async (ctx, token) => {
+  type tests = [
+    Expect<Equal<typeof ctx.queryKey, string[]>>,
+    Expect<Equal<typeof token, string>>,
+  ];
+
+  return Promise.resolve([
+    {
+      id: 1,
+      name: "Matt Pocock",
+    },
+  ]);
+});
+
+// The type of query.data should be { id: number; name: string }[] | undefined
+type tests = [
+  Expect<Equal<typeof query.data, { id: number; name: string }[] | undefined>>,
+];
+
+// If you pass in an array of numbers in the queryKey, the type of ctx.queryKey
+// should be number[]
+useApi([1, 2], async (ctx, token) => {
+  type test = Expect<Equal<typeof ctx.queryKey, number[]>>;
+});

src/08-external-libraries/62-react-query-wrapper.problem.ts

@@ -0,0 +1,49 @@
+import {
+  QueryFunctionContext,
+  QueryKey,
+  useQuery,
+} from "@tanstack/react-query";
+import { useAuthToken } from "fake-external-lib";
+import { Equal, Expect } from "../helpers/type-utils";
+
+const useApi = <TData, TQueryKey extends QueryKey>(
+  queryKey: TQueryKey,
+  queryFn: (
+    key: QueryFunctionContext<TQueryKey>,
+    token: string,
+  ) => Promise<TData>,
+) => {
+  const token = useAuthToken();
+
+  return useQuery({
+    queryFn: (ctx) => queryFn(ctx, token),
+    queryKey,
+  });
+};
+
+// If you pass in an array of strings to queryFn, the type of ctx.queryKey
+// should be string[]
+const query = useApi(["users"], async (ctx, token) => {
+  type tests = [
+    Expect<Equal<typeof ctx.queryKey, string[]>>,
+    Expect<Equal<typeof token, string>>,
+  ];
+
+  return Promise.resolve([
+    {
+      id: 1,
+      name: "Matt Pocock",
+    },
+  ]);
+});
+
+// The type of query.data should be { id: number; name: string }[] | undefined
+type tests = [
+  Expect<Equal<typeof query.data, { id: number; name: string }[] | undefined>>,
+];
+
+// If you pass in an array of numbers in the queryKey, the type of ctx.queryKey
+// should be number[]
+useApi([1, 2], async (ctx, token) => {
+  type test = Expect<Equal<typeof ctx.queryKey, number[]>>;
+});

src/08-external-libraries/62-react-query-wrapper.solution.ts

@@ -0,0 +1,48 @@
+import ReactSelect from "react-select";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * 1. Try to figure out the types the props of the Select component should have,
+ * including the generic types!
+ *
+ * Here's a clue: ReactSelect exports a type called 'Props'...
+ */
+export const Select = (props) => {
+  return <ReactSelect {...props} />;
+};
+
+interface Option {
+  id: number;
+  label: string;
+}
+
+const guitarists: Option[] = [
+  {
+    id: 1,
+    label: "Jimi Hendrix",
+  },
+  {
+    id: 2,
+    label: "Stevie Ray Vaughan",
+  },
+];
+
+<>
+  <Select
+    options={guitarists}
+    onChange={(option) => {
+      // It should infer the type of option!
+      // If isMulti is false, it should NOT be an array
+      type test = Expect<Equal<typeof option, Option | null>>;
+    }}
+  />
+
+  <Select
+    options={guitarists}
+    isMulti
+    onChange={(option) => {
+      // If isMulti is true, it should be an array
+      type test = Expect<Equal<typeof option, readonly Option[]>>;
+    }}
+  />
+</>;

src/08-external-libraries/63-react-select.problem.tsx

@@ -0,0 +1,50 @@
+import ReactSelect, { GroupBase, Props } from "react-select";
+import { Equal, Expect } from "../helpers/type-utils";
+
+/**
+ * You need to mimic the exact type of the Props type exported by react-select.
+ */
+export const Select = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(
+  props: Props<Option, IsMulti, Group>,
+) => {
+  return <ReactSelect {...props} />;
+};
+
+interface Option {
+  id: number;
+  label: string;
+}
+
+const guitarists: Option[] = [
+  {
+    id: 1,
+    label: "Jimi Hendrix",
+  },
+  {
+    id: 2,
+    label: "Stevie Ray Vaughan",
+  },
+];
+
+<>
+  <Select
+    options={guitarists}
+    onChange={(option) => {
+      // If isMulti is false, it should NOT be an array
+      type test = Expect<Equal<typeof option, Option | null>>;
+    }}
+  />
+
+  <Select
+    options={guitarists}
+    isMulti
+    onChange={(option) => {
+      // If isMulti is true, it should be an array
+      type test = Expect<Equal<typeof option, readonly Option[]>>;
+    }}
+  />
+</>;