feat: add description and notes for offset pagination expanded

src/components/ExampleExplanation.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+type Props = {
+ title: string;
+ description: string;
+ children?: ReactNode;
+};
+
+const ExampleExplanation = ({ title, description, children }: Props) => {
+ return (
+ <div className="py-3">
+ <h1 className="font-bold">{title}</h1>
+ <p className="text-xs">{description}</p>
+ {children}
+ </div>
+ );
+};
+
+export default ExampleExplanation;

src/pages/_app.tsx

@@ -9,7 +9,9 @@ export default function App({ Component, pageProps }: AppProps) {
 
  return (
  <ApolloProvider client={apolloClient}>
- <MainNav />
+ <div className="flex justify-center bg-stone-50 py-3">
+ <MainNav />
+ </div>
  <Component {...pageProps} />
  </ApolloProvider>
  );

src/pages/offset-pagination-expanded/index.tsx

@@ -1,3 +1,4 @@
+import ExampleExplanation from "@/components/ExampleExplanation";
 import { Button } from "@/components/ui/button";
 import {
  GetDealsOffsetBasedDocument,
@@ -6,18 +7,29 @@ import {
  useGetDealsOffsetBasedQuery,
 } from "@/generated/graphql";
 import { addApolloState, initializeApollo } from "@/utils/apolloClient";
+import { NetworkStatus } from "@apollo/client";
+
+const EXPLANATION = {
+ title: "Offset Pagination - rozšířené query",
+ description:
+ "Tento příklad demonstruje offset paginaci, která se používá pro načítání dat v určitých intervalech. 'Single field query' znamená, že dotaz je založen pouze na jednom poli, například 'ID'. V tomto případě se však jedná o 'rozšířený dotaz', kde se využívají více fieldů (např. deals a totalCount). Důležité je, že tento pattern funguje efektivně při server-side rendering, protože SSR umožňuje rychlejší načítání komponent na straně serveru předtím, než jsou odeslány klientovi. V případě, že dotaz obsahuje více polí, je potřeba správně nastavit 'type policies' v 'inMemoryCache', aby se zajistilo efektivní cachování dat a optimalizovala se výkon aplikace.",
+};
 
 export default function BasedPagitanionPage() {
- const { data, fetchMore, loading } = useGetDealsOffsetBasedExpandedQuery({
- variables: {
- limitTotal: 3,
- offsetTotal: 0,
- },
- });
+ const { data, fetchMore, loading, error, refetch, networkStatus } =
+ useGetDealsOffsetBasedExpandedQuery({
+ variables: {
+ limitTotal: 3,
+ offsetTotal: 0,
+ },
+ notifyOnNetworkStatusChange: true,
+ });
+
+ const isLoadingMoreDeals = networkStatus === NetworkStatus.fetchMore;
+ const isRefetching = networkStatus === NetworkStatus.refetch;
 
  const loadMore = () => {
  const currentLength = data.dealsOffsetBasedExpanded.deals.length || 0;
- console.log(currentLength);
  fetchMore({
  variables: {
  offsetTotal: currentLength,
@@ -26,27 +38,70 @@ export default function BasedPagitanionPage() {
  });
  };
 
- console.log(data);
- if (loading) {
- return <div>loading</div>;
- }
+ const areMoreDeals =
+ data.dealsOffsetBasedExpanded.deals.length <
+ data.dealsOffsetBasedExpanded.totalCount;
 
- return (
- <main className="max-w-5xl mx-auto px-3">
- <div className="py-10">
- {data.dealsOffsetBasedExpanded.deals &&
- data.dealsOffsetBasedExpanded.deals.map((deal) => (
- <div key={deal.id}>
- <h1>{deal.title}</h1>
+ if (data.dealsOffsetBasedExpanded) {
+ 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>refetch defaultně má nastavené variables hooku</li>
+ <li>Pořadí podmínek v tomto příkladu funguje pouze při SSR</li>
+ <li>
+ Musí být nastavený v options hooku notifyOnNetworkStatusChange,
+ jinak networkStatus ukazuje stále na &apos;ready&apos; (7)
+ </li>
+ </ul>
+ </div>
+ </ExampleExplanation>
+ <div className="py-8">
+ {data.dealsOffsetBasedExpanded.deals &&
+ data.dealsOffsetBasedExpanded.deals.map((deal) => (
+ <div key={deal.id}>
+ <h1>{deal.title}</h1>
+ </div>
+ ))}
+ {!areMoreDeals && (
+ <div className="pt-2 text-sm text-red-400">
+ Žádné další výsledky
  </div>
- ))}
- </div>
- <Button onClick={loadMore}>Načíst další</Button>
- </main>
- );
+ )}
+ </div>
+ <div className="flex gap-2">
+ {areMoreDeals && (
+ <Button onClick={loadMore} disabled={isLoadingMoreDeals}>
+ {isLoadingMoreDeals ? "Loading..." : "Show More"}
+ </Button>
+ )}
+ <Button
+ variant="outline"
+ onClick={() => refetch()}
+ disabled={isRefetching}
+ >
+ {isRefetching ? "Refetching deals..." : "Refetch"}
+ </Button>
+ </div>
+ </main>
+ );
+ }
+
+ if (loading && !isLoadingMoreDeals) return <div>Loading</div>;
+
+ if (error) {
+ return <div>Něco se pokazilo</div>;
+ }
+
+ return <div className="max-w-5xl mx-auto px-3">Nic tu není</div>;
 }
 
-/* export async function getServerSideProps() {
+export async function getServerSideProps() {
  const apolloClient = initializeApollo();
 
  await apolloClient.query({
@@ -61,4 +116,3 @@ export default function BasedPagitanionPage() {
  props: {},
  });
 }
- */