@undp/create-app 0.2.1 → 0.2.3

package/bin/templates/next/basic/stores/counter.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+type Actions = {
+  increment: (d?: number) => void;
+  decrement: (d?: number) => void;
+};
+
+type Store = {
+  count: number;
+  actions: Actions;
+};
+
+export const useCounterStore = create<Store>(set => ({
+  count: 0,
+  actions: {
+    increment: (d = 1) => set(state => ({ count: state.count + d })),
+    decrement: (d = 1) => set(state => ({ count: state.count - d })),
+  },
+}));
+
+export const useCounter = () => useCounterStore(s => s.count);
+
+export const useCounterActions = () => useCounterStore(s => s.actions);

package/bin/templates/queryIntegrationForNext/integration/tanstack-query.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode, useState } from 'react';
+
+export default function TanStackQueryProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  // Create client only once
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 60 * 24, // how long fetched data is considered “fresh” before it becomes “stale” 🡢 24 hrs
+            gcTime: 1000 * 60 * 60 * 24, // how long inactive (unused) query data stays in memory before being deleted 🡢 24 hrs
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}