@pagedotapp/page-db-write

Database write component with Relay GraphQL mutation support

Installation

npm install @pagedotapp/page-db-write

Usage

import { PageDbWrite } from "@pagedotapp/page-db-write"

function App() {
	return (
		<PageDbWrite
			onSuccess={(record) => console.log("Added:", record)}
			onError={(error) => console.error("Failed:", error)}
		/>
	)
}

Props

| Prop | Type | Default | Description | | ----------- | ------------------------ | ------- | --------------------------------- | | className | string | '' | Additional CSS class name | | onSuccess | (record: any) => void | - | Callback when write is successful | | onError | (error: Error) => void | - | Callback when write fails |

Features

• Relay Integration: Uses Relay mutations for database operations
• Form Validation: Prevents submission of empty values
• Loading States: Shows loading state during mutation
• Error Handling: Built-in error handling with optional callback
• Success Callback: Notifies when record is successfully added
• Auto-clear: Input clears after successful submission

GraphQL Mutation

The component uses the following GraphQL mutation (exported as PageDbWriteMutation):

mutation PageDbWriteMutation($input: demoInsertInput!) {
	insertIntodemoCollection(objects: [$input]) {
		affectedCount
		records {
			id
			created_at
			text
		}
	}
}

Relay Configuration

For use in your app, ensure you have Relay configured and copy the mutation to your local queries:

// src/queries/PageDbWriteMutation.ts
import { graphql } from "react-relay"

export const PageDbWriteMutation = graphql`
	mutation PageDbWriteMutation($input: demoInsertInput!) {
		insertIntodemoCollection(objects: [$input]) {
			affectedCount
			records {
				id
				created_at
				text
			}
		}
	}
`

Examples

Basic Usage

<PageDbWrite />

With Success Handler

<PageDbWrite
	onSuccess={(record) => {
		toast.success(`Record ${record.id} added successfully!`)
	}}
/>

With Error Handler

<PageDbWrite
	onError={(error) => {
		toast.error(`Failed to add record: ${error.message}`)
	}}
/>

With Custom Styling

<PageDbWrite className="my-custom-db-write" />

Styling

The component uses CSS modules for styling. You can override styles by passing a custom className or by targeting the component's CSS classes:

• .dbWrite - Main container
• .form - Form element
• .inputGroup - Input and button container
• .input - Text input field
• .button - Submit button

License

MIT © PageStudio