Custom Collection Snippets

1
import type { LoaderFunctionArgs } from "@remix-run/node";
2
import { json } from "@remix-run/node";
3
import { useLoaderData } from "@remix-run/react";
4
import { gql } from "graphql-request";
5

6
import { Entry } from "~/routes/_site+/c_+/$collectionId_.$entryId/components/Entry";
7
import { entryMeta } from "~/routes/_site+/c_+/$collectionId_.$entryId/utils/entryMeta";
8

9

10
const SECTIONS = {
11
   main: Main,
12
};
13

14
export { entryMeta as meta };
15

16
export async function loader({
17
   context: { payload, user },
18
   params,
19
   request,
20
}: LoaderFunctionArgs) {
21
   const { entry } = await fetchEntry({
22
      payload,
23
      params,
24
      request,
25
      user,
26
      gql: {
27
         query: QUERY,
28
         variables: {},
29
      },
30
      // rest: {
31
      //    depth: 1,
32
      // },
33
   });
34

35
   return json({
36
      entry,
37
   });
38
}
39

40
export default function EntryPage() {
41
   const { entry } = useLoaderData<typeof loader>();
42

43
   return <Entry customComponents={SECTIONS} customData={entry} />;
44
}
45

46
//The $entryId variable is optional, but always passed in with the query.
47
const QUERY = gql`
48
   query ($entryId: String!) {
49
      SingularCollectionName(id: $entryId) {
50
         id
51
         slug
52
         name
53
         icon {
54
            id
55
            url
56
         } 
57
      }
58
   }
59
`;

1
import type { LoaderFunctionArgs } from "@remix-run/node";
2
import { json } from "@remix-run/node";
3
import { useLoaderData } from "@remix-run/react";
4
import { gql } from "graphql-request";
5

6
import { List } from "~/routes/_site+/$siteId.c_+/components/List";
7
import {
8
   customListMeta,
9
   fetchList,
10
} from "~/routes/_site+/$siteId.c_+/functions/list";
11

12
export { customListMeta as meta };
13

14
export async function loader({
15
   context: { payload, user },
16
   params,
17
   request,
18
}: LoaderFunctionArgs) {
19
   const { list } = await fetchList({
20
      params,
21
      gql: {
22
         query: QUERY,
23
         variables: {},
24
      },
25
      payload,
26
      user,
27
   });
28
   return json({ list });
29
}
30

31
export default function ListPage() {
32
   const { list } = useLoaderData<typeof loader>();
33

34
   return (
35
      <List>
36
         <div></div>
37
      </List>
38
   );
39
}
40

41
const QUERY = gql`
42
   query {
43
      PluralCollectionName(limit: 100, sort: "name") {
44
         docs {
45
            id
46
            name
47
            slug
48
            element {
49
               id
50
               icon {
51
                  url
52
               }
53
            }
54
         }
55
      }
56
   }
57
`;