Skip to content

Commit 7c1013d

Browse files
pan93412pan93412
committed
refactor(points): move query to components
1 parent 7c6bd33 commit 7c1013d

File tree

5 files changed

+115
-56
lines changed

5 files changed

+115
-56
lines changed

‎app/(admin)/(activity-management)/points/_components/data-table.tsx‎

Lines changed: 67 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,51 @@ import { useSuspenseQuery } from "@apollo/client/react";
66
import type { VariablesOf } from "@graphql-typed-document-node/core";
77
import { useState } from "react";
88
import { columns, type Point } from "./data-table-columns";
9-
import { POINTS_TABLE_QUERY } from "./query";
9+
import { graphql, useFragment as readFragment } from "@/gql";
10+
11+
const POINTS_TABLE_QUERY = graphql(`
12+
query PointsTable(
13+
$first: Int
14+
$after: Cursor
15+
$last: Int
16+
$before: Cursor
17+
$where: PointWhereInput
18+
) {
19+
points(
20+
first: $first
21+
after: $after
22+
last: $last
23+
before: $before
24+
where: $where
25+
orderBy: { field: GRANTED_AT, direction: DESC }
26+
) {
27+
edges {
28+
node {
29+
id
30+
...PointsTableRow
31+
}
32+
}
33+
totalCount
34+
pageInfo {
35+
hasNextPage
36+
endCursor
37+
}
38+
}
39+
}
40+
`);
41+
42+
const POINTS_TABLE_ROW_FRAGEMENT = graphql(`
43+
fragment PointsTableRow on Point {
44+
id
45+
user {
46+
id
47+
name
48+
}
49+
points
50+
description
51+
grantedAt
52+
}
53+
`);
1054

1155
export function PointsDataTable({ query }: { query?: string }) {
1256
const PAGE_SIZE = 20;
@@ -25,30 +69,35 @@ export function PointsDataTable({ query }: { query?: string }) {
2569
variables,
2670
});
2771

28-
const pointsList = data?.points.edges
29-
?.map((edge) => {
30-
const point = edge?.node;
31-
if (!point) return null;
32-
return {
33-
id: point.id,
34-
user: {
35-
id: point.user.id,
36-
name: point.user.name,
37-
},
38-
points: point.points,
39-
description: point.description ?? "",
40-
grantedAt: point.grantedAt,
41-
} satisfies Point;
42-
})
43-
.filter((point) => point !== null) ?? [];
72+
const pointsList =
73+
data?.points.edges
74+
?.map((edge) => {
75+
const node = edge?.node;
76+
if (!node) return null;
77+
78+
const point = readFragment(POINTS_TABLE_ROW_FRAGEMENT, node);
79+
80+
if (!point) return null;
81+
return {
82+
id: point.id,
83+
user: {
84+
id: point.user.id,
85+
name: point.user.name,
86+
},
87+
points: point.points,
88+
description: point.description ?? "",
89+
grantedAt: point.grantedAt,
90+
} satisfies Point;
91+
})
92+
.filter((point) => point !== null) ?? [];
4493

4594
const pageInfo = data?.points.pageInfo;
4695

4796
const handlePageChange = (direction: Direction) => {
4897
if (!pageInfo) return;
4998
if (direction === "forward" && pageInfo.hasNextPage) {
5099
const nextCursor = pageInfo.endCursor ?? null;
51-
setCursors(prev => {
100+
setCursors((prev) => {
52101
const newCursors = prev.slice(0, currentIndex + 1);
53102
newCursors.push(nextCursor);
54103
return newCursors;

‎app/(admin)/(activity-management)/points/_components/query.ts‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎gql/gql.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ type Documents = {
2020
"\n query PointCards($id: ID!) {\n pointGrant(id: $id) {\n id\n ...PointDetailsCard\n ...PointUserCard\n }\n }\n": typeof types.PointCardsDocument,
2121
"\n fragment PointDetailsCard on Point {\n points\n description\n grantedAt\n }\n": typeof types.PointDetailsCardFragmentDoc,
2222
"\n fragment PointUserCard on Point {\n user {\n id\n name\n }\n }\n": typeof types.PointUserCardFragmentDoc,
23-
"\n query PointsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: PointWhereInput\n ) {\n points(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: GRANTED_AT, direction: DESC }) {\n edges {\n node {\n id\n user {\n id\n name\n }\n points\n description\n grantedAt\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n": typeof types.PointsTableDocument,
23+
"\n query PointsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: PointWhereInput\n ) {\n points(\n first: $first\n after: $after\n last: $last\n before: $before\n where: $where\n orderBy: { field: GRANTED_AT, direction: DESC }\n ) {\n edges {\n node {\n id\n ...PointsTableRow\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n }\n": typeof types.PointsTableDocument,
24+
"\n fragment PointsTableRow on Point {\n id\n user {\n id\n name\n }\n points\n description\n grantedAt\n }\n": typeof types.PointsTableRowFragmentDoc,
2425
"\n query SubmissionHeader($id: ID!) {\n submission(id: $id) {\n id\n status\n submittedAt\n }\n }\n": typeof types.SubmissionHeaderDocument,
2526
"\n fragment SubmissionResultCard on Submission {\n queryResult {\n columns\n rows\n matchAnswer\n }\n question {\n id\n }\n }\n": typeof types.SubmissionResultCardFragmentDoc,
2627
"\n query SubmissionCards($id: ID!) {\n submission(id: $id) {\n id\n ...SubmissionDetailsCard\n ...SubmissionUserCard\n ...SubmissionResultCard\n }\n }\n": typeof types.SubmissionCardsDocument,
@@ -102,7 +103,8 @@ const documents: Documents = {
102103
"\n query PointCards($id: ID!) {\n pointGrant(id: $id) {\n id\n ...PointDetailsCard\n ...PointUserCard\n }\n }\n": types.PointCardsDocument,
103104
"\n fragment PointDetailsCard on Point {\n points\n description\n grantedAt\n }\n": types.PointDetailsCardFragmentDoc,
104105
"\n fragment PointUserCard on Point {\n user {\n id\n name\n }\n }\n": types.PointUserCardFragmentDoc,
105-
"\n query PointsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: PointWhereInput\n ) {\n points(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: GRANTED_AT, direction: DESC }) {\n edges {\n node {\n id\n user {\n id\n name\n }\n points\n description\n grantedAt\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n": types.PointsTableDocument,
106+
"\n query PointsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: PointWhereInput\n ) {\n points(\n first: $first\n after: $after\n last: $last\n before: $before\n where: $where\n orderBy: { field: GRANTED_AT, direction: DESC }\n ) {\n edges {\n node {\n id\n ...PointsTableRow\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n }\n": types.PointsTableDocument,
107+
"\n fragment PointsTableRow on Point {\n id\n user {\n id\n name\n }\n points\n description\n grantedAt\n }\n": types.PointsTableRowFragmentDoc,
106108
"\n query SubmissionHeader($id: ID!) {\n submission(id: $id) {\n id\n status\n submittedAt\n }\n }\n": types.SubmissionHeaderDocument,
107109
"\n fragment SubmissionResultCard on Submission {\n queryResult {\n columns\n rows\n matchAnswer\n }\n question {\n id\n }\n }\n": types.SubmissionResultCardFragmentDoc,
108110
"\n query SubmissionCards($id: ID!) {\n submission(id: $id) {\n id\n ...SubmissionDetailsCard\n ...SubmissionUserCard\n ...SubmissionResultCard\n }\n }\n": types.SubmissionCardsDocument,
@@ -219,7 +221,11 @@ export function graphql(source: "\n fragment PointUserCard on Point {\n user
219221
/**
220222
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
221223
*/
222-
export function graphql(source: "\n query PointsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: PointWhereInput\n ) {\n points(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: GRANTED_AT, direction: DESC }) {\n edges {\n node {\n id\n user {\n id\n name\n }\n points\n description\n grantedAt\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n"): (typeof documents)["\n query PointsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: PointWhereInput\n ) {\n points(first: $first, after: $after, last: $last, before: $before, where: $where, orderBy: { field: GRANTED_AT, direction: DESC }) {\n edges {\n node {\n id\n user {\n id\n name\n }\n points\n description\n grantedAt\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n endCursor\n startCursor\n }\n }\n }\n"];
224+
export function graphql(source: "\n query PointsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: PointWhereInput\n ) {\n points(\n first: $first\n after: $after\n last: $last\n before: $before\n where: $where\n orderBy: { field: GRANTED_AT, direction: DESC }\n ) {\n edges {\n node {\n id\n ...PointsTableRow\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n }\n"): (typeof documents)["\n query PointsTable(\n $first: Int\n $after: Cursor\n $last: Int\n $before: Cursor\n $where: PointWhereInput\n ) {\n points(\n first: $first\n after: $after\n last: $last\n before: $before\n where: $where\n orderBy: { field: GRANTED_AT, direction: DESC }\n ) {\n edges {\n node {\n id\n ...PointsTableRow\n }\n }\n totalCount\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n }\n"];
225+
/**
226+
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
227+
*/
228+
export function graphql(source: "\n fragment PointsTableRow on Point {\n id\n user {\n id\n name\n }\n points\n description\n grantedAt\n }\n"): (typeof documents)["\n fragment PointsTableRow on Point {\n id\n user {\n id\n name\n }\n points\n description\n grantedAt\n }\n"];
223229
/**
224230
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
225231
*/

0 commit comments

Comments
 (0)