Using Shopify Polaris components with Gadget 

1import { useFindMany } from "@gadgetinc/react";
2import { api } from "../api";
3import { Card, DataTable, Page, Pagination, Text, BlockStack } from "@shopify/polaris";
4import { useState, useCallback, useEffect } from "react";
5
6/**
7 * CHANGE NUM_RECORDS TO MODIFY THE NUMBER OF RECORDS FETCHED AT A SINGLE TIME
8 */
9const NUM_RECORDS = 10;
10
11// helper functions used to capitalize headings
12const toCapitalizedWords = (name: string) => {
13  var words = name.match(/[A-Za-z][a-z]*/g) || [];
14  return words.map(capitalize).join(" ");
15};
16
17const capitalize = (word: string) => {
18  return word.charAt(0).toUpperCase() + word.substring(1);
19};
20
21type CursorType = {
22  first?: number;
23  last?: number;
24  before?: string;
25  after?: string;
26};
27const initialCursor: CursorType = {
28  first: NUM_RECORDS,
29  last: undefined,
30  before: undefined,
31  after: undefined,
32};
33
34const ShopPage = () => {
35  // React state to manage table data and settings, as well as pagination cursor
36  const [cursor, setCursor] = useState<CursorType>(initialCursor);
37  const [rows, setRows] = useState<(string | number | boolean | null)[][]>([]);
38  const [headings, setHeadings] = useState<string[]>([]);
39  const [columnContentTypes, setColumnContentTypes] = useState<("text" | "numeric")[]>([]);
40
41  /**
42   * CHANGE shopifyShop TO YOUR GADGET MODEL'S API IDENTIFIER TO FETCH DIFFERENT DATA
43   */
44  const [{ data, fetching, error }] = useFindMany(api.shopifyShop, {
45    ...cursor,
46  });
47
48  // set all data to state values
49  useEffect(() => {
50    if (data) {
51      // get JSON format for returned data
52      const jsonData = data.toJSON();
53
54      // loop through returned data to stringify objects
55      // this may not be necessary, depending on the shape of your displayed data model (see commented out line below)
56      // this can also be optimized if you know what columns need to be transformed (use column indexes instead of looping with Object.values(d))
57      setRows(
58        jsonData?.map((d) =>
59          Object.values(d).map((value) => {
60            // make sure objects are able to be rendered in table
61            if (value instanceof Object) {
62              /**
63               *  YOU MAY NEED TO CHANGE THIS IF YOU NEED SPECIFIC TRANSFORMS FOR OBJECTS
64               */
65              return JSON.stringify(value);
66            }
67            return value;
68          })
69        )
70      );
71
72      // an alternative way to set rows if data transforms are not required
73      // setRows(jsonData.map(d => Object.values(d)))
74
75      // create readable headings and get column types
76      if (headings.length === 0 || headings.length !== Object.keys(jsonData[0]).length) {
77        const row = jsonData[0];
78        let headings = Object.keys(row);
79        setHeadings(headings.map((key) => toCapitalizedWords(key)));
80
81        let values = Object.values(row);
82        setColumnContentTypes(values.map((value) => (typeof value !== "number" || !isNaN(value) ? "text" : "numeric")));
83      }
84    }
85  }, [data]);
86
87  // handle pagination
88  const pageForward = useCallback(() => {
89    setCursor({ after: data?.endCursor, first: NUM_RECORDS });
90  }, [data]);
91  const pageBackward = useCallback(() => {
92    setCursor({ before: data?.startCursor, last: NUM_RECORDS });
93  }, [data]);
94
95  // display any request errors
96  if (error) {
97    return (
98      <Page title="Error">
99        <Text variant="bodyMd" as="p">
100          Error: {error.toString()}
101        </Text>
102      </Page>
103    );
104  }
105
106  // draw the page and data table
107  return (
108    <Page title="Gadget + Polaris data table" fullWidth>
109      <Card>
110        <BlockStack>
111          <Text as="h4">
112            For DataTable component details, see the{" "}
113            <a href="https://polaris.shopify.com/components/tables/data-table" target="_blank">
114              Polaris docs
115            </a>
116          </Text>
117          <Pagination
118            label="Use to paginate"
119            hasPrevious={data?.hasPreviousPage}
120            onPrevious={pageBackward}
121            hasNext={data?.hasNextPage}
122            onNext={pageForward}
123          />
124          {data && (
125            <DataTable columnContentTypes={columnContentTypes} headings={headings} rows={rows} hasZebraStripingOnData stickyHeader />
126          )}
127        </BlockStack>
128      </Card>
129    </Page>
130  );
131};
132
133export default ShopPage;

1import { useFindMany } from "@gadgetinc/react";
2import { api } from "./api";
3
4// for example: only include the shop id and name in the table
5const [{ data, fetching, error }] = useFindMany(api.shopifyShop, {
6  select: {
7    id: true,
8    name: true,
9  },
10});