/** * test-crud-public-graphql.tsx * -------------------------------- * * Full-feature CRUD demo of `@crudx/core` + `@crudx/graphql-apollo-adapter` * rendered through `@crudx/mui` against the public GraphQLZero API * (https://graphqlzero.almansi.me/api), a free GraphQL mirror of * JSONPlaceholder. * * Demonstrates the breadth of `` in one page: page * header + page actions, filter view, table tabs, sticky checkbox + * action columns, sorting, density, expand slot, custom header * actions, modal forms, detail drawer, row selection + bulk actions, * and a live `contentViewType` toggle that swaps the table grid for * a card view via `renderItemView`. The exact source for the page * is rendered via the `` panel. */ import { useMemo, useState } from 'react'; import toast from 'react-hot-toast'; import { ApolloClient, ApolloProvider, gql, HttpLink, InMemoryCache, useLazyQuery, useMutation, useQuery, } from '@apollo/client'; import { CrudProps } from '@crudx/core'; import { createGraphqlApolloAdapter } from '@crudx/graphql-apollo-adapter'; import { CrudPanelView, Dialog } from '@crudx/mui'; import GridViewIcon from '@mui/icons-material/GridView'; import RestartAltIcon from '@mui/icons-material/RestartAlt'; import ViewListIcon from '@mui/icons-material/ViewList'; import { Box, Button, Card, CardContent, Chip, IconButton, Paper, Stack, TextField, Tooltip, Typography, } from '@mui/material'; import { GetStaticProps } from 'next'; import { AppBar, JsonView, SourceView } from '../components'; import { readPageSource } from '../lib/pageSource'; const PAGE_SOURCE_PATH = 'apps/example/src/pages/test-crud-public-graphql.tsx'; /** * -------------------------- * Public Apollo client * -------------------------- */ const PUBLIC_ENDPOINT = 'https://graphqlzero.almansi.me/api'; const createPublicClient = () => new ApolloClient({ link: new HttpLink({ uri: PUBLIC_ENDPOINT }), cache: new InMemoryCache(), }); /** * -------------------------- * Schema typings * -------------------------- */ type Post = { id: string; title: string; body: string; }; type PostsListResponse = { posts: { data: Post[]; meta: { totalCount: number } }; }; type PostsListVariables = { options?: { paginate?: { page?: number; limit?: number }; search?: { q?: string }; }; }; type PostDetailResponse = { post: Post }; type PostDetailVariables = { id: string }; type PostCreateResponse = { createPost: Post }; type PostCreateVariables = { input: { title: string; body: string } }; type PostUpdateResponse = { updatePost: Post }; type PostUpdateVariables = { id: string; input: { title?: string; body?: string }; }; type PostDeleteResponse = { deletePost: boolean }; type PostDeleteVariables = { id: string }; /** * -------------------------- * Hand-rolled Apollo hooks * -------------------------- * * No codegen — `gql` + `useQuery`/`useMutation` produce the exact * shape `@crudx/graphql-apollo-adapter` expects. */ const POSTS_LIST = gql` query PostsList($options: PageQueryOptions) { posts(options: $options) { data { id title body } meta { totalCount } } } `; const POST_DETAIL = gql` query PostDetail($id: ID!) { post(id: $id) { id title body } } `; const POST_CREATE = gql` mutation PostCreate($input: CreatePostInput!) { createPost(input: $input) { id title body } } `; const POST_UPDATE = gql` mutation PostUpdate($id: ID!, $input: UpdatePostInput!) { updatePost(id: $id, input: $input) { id title body } } `; const POST_DELETE = gql` mutation PostDelete($id: ID!) { deletePost(id: $id) } `; const usePostsListQuery = ( options?: Parameters< typeof useQuery >[1] ) => useQuery(POSTS_LIST, options); const usePostDetailLazyQuery = ( options?: Parameters< typeof useLazyQuery >[1] ) => useLazyQuery(POST_DETAIL, options); const usePostCreateMutation = ( options?: Parameters< typeof useMutation >[1] ) => useMutation(POST_CREATE, options); const usePostUpdateMutation = ( options?: Parameters< typeof useMutation >[1] ) => useMutation(POST_UPDATE, options); const usePostDeleteMutation = ( options?: Parameters< typeof useMutation >[1] ) => useMutation(POST_DELETE, options); /** * -------------------------- * The CRUD page * -------------------------- */ type PostSchemata = { get: [PostDetailResponse, PostDetailVariables, Post]; list: [PostsListResponse, PostsListVariables, Post]; create: [PostCreateResponse, PostCreateVariables]; update: [PostUpdateResponse, PostUpdateVariables]; delete: [PostDeleteResponse, PostDeleteVariables]; }; /** * -------------------------- * Adapter + schema (builder path) * -------------------------- */ const graphqlAdapter = createGraphqlApolloAdapter(); const postsSchema = graphqlAdapter.schema({ list: { key: 'posts', hook: usePostsListQuery }, get: { key: 'post', hook: usePostDetailLazyQuery }, create: { key: 'createPost', hook: usePostCreateMutation }, update: { key: 'updatePost', hook: usePostUpdateMutation }, delete: { key: 'deletePost', hook: usePostDeleteMutation }, }); /** * Inline form used by both create and update modals. Updating * pre-fills from `initial`; submit fires the relevant mutation and * closes the modal on success. */ function PostForm(props: { mode: 'create' | 'update'; initial?: Partial; onSubmit: (values: { title: string; body: string }) => Promise; onCancel: () => void; }) { const { mode, initial, onSubmit, onCancel } = props; const [title, setTitle] = useState(initial?.title ?? ''); const [body, setBody] = useState(initial?.body ?? ''); const [submitting, setSubmitting] = useState(false); const handleSubmit = async () => { if (!title.trim() || !body.trim()) { toast.error('Title and body are required'); return; } setSubmitting(true); try { await onSubmit({ title, body }); onCancel(); } finally { setSubmitting(false); } }; return ( GraphQLZero accepts the {mode} mutation and echoes the new record, but does not persist server-side — refreshes will return the original 100 posts. setTitle(e.target.value)} fullWidth /> setBody(e.target.value)} fullWidth /> ); } /** * Card item used when contentViewType === 'view' (renderItemView). */ function PostCard(props: { post: Post; index: number; checkbox: () => React.ReactNode; action: () => React.ReactNode; }) { const { post, index, checkbox, action } = props; return ( {checkbox()} #{post.id} {action()} {post.title} {post.body} row {index + 1} id:{post.id} ); } function PostsPanel({ source }: { source: string }) { // Local UI state layered on top of the panel's data. const [contentViewType, setContentViewType] = useState<'table' | 'view'>( 'table' ); const [tab, setTab] = useState<'all' | 'short' | 'long'>('all'); const [search, setSearch] = useState(''); const [sortDir, setSortDir] = useState<'DEFAULT' | 'ASC' | 'DESC'>('DEFAULT'); const [expanded, setExpanded] = useState(true); const hasActiveFilters = tab !== 'all' || sortDir !== 'DEFAULT' || search.trim() !== ''; const resetFilters = () => { setSearch(''); setTab('all'); setSortDir('DEFAULT'); }; const transform = (rows: Post[] | undefined): Post[] => { let next = rows ?? []; if (tab === 'short') next = next.filter((r) => r.title.length <= 30); if (tab === 'long') next = next.filter((r) => r.title.length > 30); if (search.trim()) { const q = search.trim().toLowerCase(); next = next.filter( (r) => r.title.toLowerCase().includes(q) || r.body.toLowerCase().includes(q) ); } if (sortDir === 'ASC') { next = [...next].sort((a, b) => a.title.localeCompare(b.title)); } else if (sortDir === 'DESC') { next = [...next].sort((a, b) => b.title.localeCompare(a.title)); } return next; }; return ( Status {search ? : null} {!hasActiveFilters ? ( no filters applied ) : null} {hasActiveFilters ? ( ) : null} ( )} /> name="post" schema={postsSchema} paging={{ strategy: 'CUSTOM', pageSize: 10, custom: { extract: { paging: (_ctx, variables) => ({ pageSize: variables?.options?.paginate?.limit ?? 10, }), pagination: (context, options) => { const result = options.data?.posts; const total = result?.meta?.totalCount ?? 0; const lastPage = Math.max( 1, Math.ceil(total / Math.max(1, context.pageSize)) ); return { list: result?.data ?? [], total, page: { next: context.pageNumber < lastPage ? options.intentNext : null, previous: context.pageNumber > 1 && options.intentPrev > 0 ? options.intentPrev : null, canPaginateToPage: true, }, }; }, }, compose: { variables: (context, variables) => ({ ...(variables ?? {}), options: { ...((variables as any)?.options ?? {}), paginate: { page: context.pageNumber, limit: context.pageSize, }, }, }), sorting: (_ctx, variables) => variables ?? {}, pagination: (context) => ({ options: { paginate: { page: context.pageNumber, limit: context.pageSize, }, }, }), }, }, }} pageTitle="Posts" pageBackPath="/" pageBreadcrumbs={[ { label: 'Demos', url: '/' }, { label: 'GraphQL CRUD' }, ]} pageActions={[ { key: 'view-toggle', content: ( ), }, ]} filterTitle="Search" filterNode={ setSearch(e.target.value)} /> } contentViewType={contentViewType} tableTitle="Posts" tableTabState={tab} tableTabs={[ { key: 'all', label: 'All' }, { key: 'short', label: 'Short titles' }, { key: 'long', label: 'Long titles' }, ]} onTableTabChange={(next) => setTab(next as typeof tab)} tableInfos={[ { type: 'title' }, { type: 'total', text: '{count} posts' }, { type: 'bulk', text: '{count} selected' }, ]} tableActions={[ { action: 'create' }, { action: 'refresh' }, { action: 'sorting' }, { action: 'density' }, { action: 'expand' }, { action: 'settings', items: [ { key: 'columns', title: 'Columns…' }, { key: 'export', title: 'Export CSV' }, ], }, { key: 'view-mode', action: 'custom', tooltip: 'Toggle table / card view', render: () => ( setContentViewType((v) => v === 'table' ? 'view' : 'table' ) } > {contentViewType === 'table' ? ( ) : ( )} ), }, ]} tableExpandState={expanded} tableExpandView={ Header expand slot — use it for inline filters, charts, or contextual help. Toggle via the chevron in the table actions row. } tableCheckboxColumnSticky tableActionColumnSticky columnDataIndex="id" columns={[ { key: 'id', title: 'ID', width: 80, dataIndex: 'id' }, { key: 'title', title: 'Title', width: 320, dataIndex: 'title', render: (value) => ( {String(value ?? '')} ), }, { key: 'body', title: 'Body', dataIndex: 'body', render: (value) => ( {String(value ?? '')} ), }, ]} columnActions={{ name: 'post', identifier: 'title', enableView: true, enableUpdate: true, enableDelete: true, enableExport: false, enableAlert: ['delete'], deleteAction: async (_e, ctx) => { const id = ctx?.data?.id; const trigger = ctx?.mutation?.delete?.[0]; if (!id || !trigger) return; try { await trigger({ variables: { id } }); toast.success('Post deleted'); ctx?.context?.pagingProps?.refresh?.(); } catch { toast.error('Failed to delete post'); } }, }} enableRowSelection prepareTableViewProps={(nodeProps) => ({ data: transform(nodeProps.data as Post[] | undefined) as any, onTriggerSorting: (next) => setSortDir(next), onTriggerExpand: (_current, nextState) => setExpanded(nextState), onTriggerBulkAction: (action) => { toast(`Bulk action: ${action}`); }, })} prepareContentViewProps={(nodeProps) => ({ data: transform(nodeProps.data as Post[] | undefined) as any, onTriggerSorting: (next) => setSortDir(next), onTriggerExpand: (_current, nextState) => setExpanded(nextState), onTriggerBulkAction: (action) => { toast(`Bulk action: ${action}`); }, paginateType: 'pagination', })} modalForms={{ create: { title: 'Create post', render: (options) => ( ), }, update: { title: 'Edit post', render: (options) => ( ), }, }} detailsViewType="drawer" renderDetailsView={(nodeProps) => ( Detail {nodeProps?.data?.title ?? 'Post'} )} renderItemView={(record, views, state) => ( )} /> ); } type IndexProps = { source: string }; export function Index({ source }: IndexProps) { const client = useMemo(createPublicClient, []); return ( ); } export const getStaticProps: GetStaticProps = async () => ({ props: { source: readPageSource(PAGE_SOURCE_PATH) }, }); export default Index; // keep CrudProps imported so future ref-based interactions stay typed export type _PostsCrudProps = CrudProps;

	ID	TITLE	BODY	ACTION