feat: remove fetching from page pagination-with-filters

src/pages/offset-pagination/index.tsx

@@ -1,12 +1,19 @@
+import ExampleExplanation from "@/components/ExampleExplanation";
 import { Button } from "@/components/ui/button";
 import {
  GetDealsOffsetBasedDocument,
  useGetDealsOffsetBasedQuery,
 } from "@/generated/graphql";
 import { addApolloState, initializeApollo } from "@/utils/apolloClient";
 
+const EXPLANATION = {
+ title: "Offset Pagination - single field query",
+ description:
+ "Nejjednodušší způsob offset-based paginace, pro sprváný cachování je potřeba nastavit typePolicy v InMemoryCache.",
+};
+
 export default function BasedPagitanionPage() {
- const { data, fetchMore, loading } = useGetDealsOffsetBasedQuery({
+ const { data, fetchMore, loading, error } = useGetDealsOffsetBasedQuery({
  variables: {
  limit: 3,
  offset: 0,
@@ -23,26 +30,38 @@ export default function BasedPagitanionPage() {
  });
  };
 
- console.log(data);
+ if (data?.dealsOffsetBased && data?.dealsOffsetBased.length !== 0) {
+ return (
+ <main className="max-w-5xl mx-auto px-3">
+ <ExampleExplanation
+ title={EXPLANATION.title}
+ description={EXPLANATION.description}
+ />
+
+ <div className="py-10">
+ {data.dealsOffsetBased.map((deal) => (
+ <div key={deal.id}>
+ <h1>{deal.title}</h1>
+ </div>
+ ))}
+ </div>
+ <Button onClick={loadMore}>Načíst další</Button>
+ </main>
+ );
+ }
+
  if (loading) {
  return <div>loading</div>;
  }
 
- return (
- <main className="max-w-5xl mx-auto px-3">
- <div className="py-10">
- {data.dealsOffsetBased.map((deal) => (
- <div key={deal.id}>
- <h1>{deal.title}</h1>
- </div>
- ))}
- </div>
- <Button onClick={loadMore}>Načíst další</Button>
- </main>
- );
+ if (error) {
+ return <div>Error</div>;
+ }
+
+ return <div>Nic tu není</div>;
 }
 
-/* export async function getServerSideProps() {
+export async function getServerSideProps() {
  const apolloClient = initializeApollo();
 
  await apolloClient.query({
@@ -57,4 +76,3 @@ export default function BasedPagitanionPage() {
  props: {},
  });
 }
- */

src/pages/pagination-with-filters/index.tsx

@@ -1,74 +1,117 @@
+import ExampleExplanation from "@/components/ExampleExplanation";
 import { Button } from "@/components/ui/button";
-import { useGetDealsOffsetWithFilterQuery } from "@/generated/graphql";
+import {
+ GetDealsOffsetWithFilterDocument,
+ useGetDealsOffsetWithFilterQuery,
+} from "@/generated/graphql";
 import { cn } from "@/lib/utils";
+import { addApolloState, initializeApollo } from "@/utils/apolloClient";
+import { useState } from "react";
+
+const EXPLANATION = {
+ title: "Offset Pagination - s filtry",
+ description: "Trošku náročnější koncept paginace s filtry",
+};
 
 export default function BasedPaginationWithFiltersPage() {
- const { data, loading, refetch } = useGetDealsOffsetWithFilterQuery({
+ const [filter, setFilter] = useState<boolean | undefined>();
+
+ const { data, loading, error, fetchMore } = useGetDealsOffsetWithFilterQuery({
  variables: {
  limit: 3,
  offset: 0,
+ isActive: filter,
  },
- fetchPolicy: "cache-first",
  });
 
+ const loadMore = () => {
+ // TODO: merge cache objects
+ const currentLength = data.dealsOffsetWithFilter.deals.length || 0;
+ fetchMore({
+ variables: {
+ offset: currentLength,
+ limit: 3,
+ },
+ });
+ };
+
+ if (data?.dealsOffsetWithFilter?.deals) {
+ return (
+ <main className="max-w-5xl mx-auto px-3">
+ <ExampleExplanation
+ title={EXPLANATION.title}
+ description={EXPLANATION.description}
+ >
+ <div className="py-1">
+ <h3 className="font-semibold">Poznámky</h3>
+ <ul className="text-xs">
+ <li>
+ - Mění se zde data, díky tomu že se změní state filters a celá
+ komponenta se re-renderuje
+ </li>
+ <li>
+ - Nepoužívá se zde refetch pro změnu filtrů, protože nebere v
+ potaz cache.
+ </li>
+ </ul>
+ </div>
+ </ExampleExplanation>
+ <div className="space-x-2">
+ <Button onClick={() => setFilter(undefined)}>All</Button>
+ <Button onClick={() => setFilter(true)}>Data with isActive</Button>
+ <Button onClick={() => setFilter(false)}>
+ Data with isActive = false
+ </Button>
+ </div>
+ <div className="py-10">
+ {data.dealsOffsetWithFilter.deals &&
+ data.dealsOffsetWithFilter.deals.map((deal) => (
+ <div key={deal.id}>
+ <h1>
+ {deal.title}
+ <span
+ className={cn("text-sm text-green-400", {
+ "text-red-500": !deal.isActive,
+ })}
+ >
+ ({deal.isActive ? "true" : "false"})
+ </span>
+ </h1>
+ </div>
+ ))}
+ </div>
+ <div className="flex gap-2">
+ <Button variant="destructive" onClick={loadMore}>
+ Show More
+ </Button>
+ </div>
+ </main>
+ );
+ }
+
  if (loading) {
  return <div>loading</div>;
  }
 
- return (
- <main className="max-w-5xl mx-auto px-3">
- <div className="py-10">
- {data.dealsOffsetWithFilter.deals &&
- data.dealsOffsetWithFilter.deals.map((deal) => (
- <div key={deal.id}>
- <h1>
- {deal.title}{" "}
- <span
- className={cn("text-sm text-green-400", {
- "text-red-500": !deal.isActive,
- })}
- >
- ({deal.isActive ? "true" : "false"})
- </span>
- </h1>
- </div>
- ))}
- </div>
- <div className="space-x-2">
- <Button
- onClick={() =>
- refetch({
- isActive: undefined,
- limit: 3,
- offset: 0,
- })
- }
- >
- All
- </Button>
- <Button
- onClick={() =>
- refetch({
- isActive: true,
- limit: 3,
- offset: 0,
- })
- }
- >
- Refetch data with isActive
- </Button>
- <Button
- onClick={() =>
- refetch({
- isActive: false,
- limit: 3,
- offset: 0,
- })
- }
- >
- Refetch data with isActive = false
- </Button>
- </div>
- </main>
- );
+ if (error) {
+ return <div>Error</div>;
+ }
+
+ return <div>Asi se sem nedostanu</div>;
+}
+
+export async function getServerSideProps() {
+ const apolloClient = initializeApollo();
+
+ await apolloClient.query({
+ query: GetDealsOffsetWithFilterDocument,
+ variables: {
+ limit: 3,
+ offset: 0,
+ },
+ });
+
+ return addApolloState(apolloClient, {
+ props: {},
+ });
 }