8 | {/* Title field */}
9 |
10 |
11 |
12 |
13 |
14 | {/* Description field */}
15 |
16 |
17 |
18 |
19 |
20 | {/* Grid layout for form fields */}
21 |
22 | {/* Assignee */}
23 |
24 |
25 |
26 |
27 |
28 | {/* Priority */}
29 |
30 |
31 |
32 |
33 |
34 | {/* Type */}
35 |
36 |
37 |
38 |
39 |
40 | {/* Status */}
41 |
42 |
43 |
44 |
45 |
46 | {/* Story Points */}
47 |
48 |
49 |
50 |
51 |
52 | {/* Due Date */}
53 |
54 |
55 |
56 |
57 |
58 |
59 | {/* Buttons */}
60 |
61 |
62 |
63 |
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/src/providers/query.provider.tsx:
--------------------------------------------------------------------------------
1 | // In Next.js, this file would be called: app/providers.jsx
2 | "use client";
3 |
4 | // We can not useState or useRef in a server component, which is why we are
5 | // extracting this part out into it's own file with 'use client' on top
6 | import { ReactNode } from "react";
7 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
8 | // import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
9 |
10 | function makeQueryClient() {
11 | return new QueryClient({
12 | defaultOptions: {
13 | queries: {
14 | // With SSR, we usually want to set some default staleTime
15 | // above 0 to avoid refetching immediately on the client
16 | staleTime: 60 * 1000,
17 | },
18 | },
19 | });
20 | }
21 |
22 | let browserQueryClient: QueryClient | undefined = undefined;
23 |
24 | function getQueryClient() {
25 | if (typeof window === "undefined") {
26 | // Server: always make a new query client
27 | return makeQueryClient();
28 | } else {
29 | // Browser: make a new query client if we don't already have one
30 | // This is very important so we don't re-make a new client if React
31 | // suspends during the initial render. This may not be needed if we
32 | // have a suspense boundary BELOW the creation of the query client
33 | if (!browserQueryClient) browserQueryClient = makeQueryClient();
34 | return browserQueryClient;
35 | }
36 | }
37 |
38 | type Props = {
39 | children: ReactNode;
40 | };
41 |
42 | export function QueryProviders({ children }: Props) {
43 | // NOTE: Avoid useState when initializing the query client if you don't
44 | // have a suspense boundary between this and the code that may
45 | // suspend because React will throw away the client on the initial
46 | // render if it suspends and there is no boundary
47 | const queryClient = getQueryClient();
48 |
49 | return (
50 |