1 of 5

4. CRUD Operations

4.1 Creating Tasks

The first thing to do would be to create a form to insert a new task in the database.

BlueBase provides a utility to create forms quickly by just writing a simple JSON-based schema. Let's get right to it.

Step 1: Install the plugin

Add the following plugin as a dependency to the project:

yarn add @bluebase/plugin-json-graphql-components

Then import and use this plugin to BlueBase:

plugins.ts

import BlueBasePluginApollo from '@bluebase/plugin-apollo';
import BlueBasePluginJsonGraphqlComponents from '@bluebase/plugin-json-graphql-components';
import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginMaterialUI from '@bluebase/plugin-material-ui';
import BlueBasePluginReactRouter from '@bluebase/plugin-react-router';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

import Plugin from './src';

export const plugins = [
	BlueBasePluginApollo,
	BlueBasePluginJsonGraphqlComponents,
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginMaterialUI,
	BlueBasePluginReactRouter,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,

	Plugin,
	BlueBasePluginSettingsApp,
];

plugins.native.ts

import BlueBasePluginApollo from '@bluebase/plugin-apollo';
import BlueBasePluginJsonGraphqlComponents from '@bluebase/plugin-json-graphql-components';
import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginReactNativePaper from '@bluebase/plugin-react-native-paper';
import BlueBasePluginReactNavigation from '@bluebase/plugin-react-navigation';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

import Plugin from './src';

export const plugins = [
	BlueBasePluginApollo,
	BlueBasePluginJsonGraphqlComponents,
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginReactNativePaper,
	BlueBasePluginReactNavigation,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,

	Plugin,
	BlueBasePluginSettingsApp,
];

Step 2: Create Mutation

Now we're going to write a GraphQL mutation to insert a new task in the database. Create the following file.

src/components/CreateTaskForm/CreateTaskMutation.graphql. ts

import gql from 'graphql-tag';

export const CreateTaskMutation = gql`
	mutation CreateTaskMutation ($tasks: [tasksInsertInput!]!){
		insertIntotasksCollection(objects: $tasks) {
			records {
				id
				title
				description
				completed
			}
		}
	}
`;

This tutorial does not cover how GraphQL works. If you are new to it, head over to this official tutorial.

Step 3: Generate Typings

We will now generate typescript interfaces for our GraphQL API. Execute the following command:

yarn graphql-codegen

This will create a new file at: src/graphql-types.ts.

Step 4: Create Form

Create the follwing files:

src/components/CreateTaskForm/CreateTaskForm.tsx

import { getComponent, useNavigation } from '@bluebase/core';
import { JsonGraphqlFormProps } from '@bluebase/plugin-json-graphql-components';
import React, { useCallback } from 'react';

import { CreateTaskMutationMutationVariables, TasksInsertInput } from '../../graphql-types';
import { CreateTaskMutation } from './CreateTaskMutation.graphql';

const JsonGraphqlForm = getComponent<JsonGraphqlFormProps<TasksInsertInput>>('JsonGraphqlForm');

export interface CreateTaskFormProps {}

export const CreateTaskForm = (props: CreateTaskFormProps) => {
	const { navigate } = useNavigation();

	const onSuccess = useCallback(() => {
		navigate('TasksApp');
	}, []);

	const mapFormValuesToMutationVariables = useCallback(
		(task: TasksInsertInput): CreateTaskMutationMutationVariables => {
			return { tasks: [task] };
		}, []);

	return (
		<JsonGraphqlForm
			mutation={{
				mutation: CreateTaskMutation
			}}
			onSuccess={onSuccess}
			mapFormValuesToMutationVariables={mapFormValuesToMutationVariables}
			{...props}
			schema={{
				validateOnBlur: false,
				validateOnChange: false,

				fields: [
					{
						autoFocus: true,
						label: 'Title',
						name: 'title',
						required: true,
						type: 'text',
					},
					{
						label: 'Description',
						name: 'description',
						type: 'text',
					},
					{
						label: 'Completed',
						name: 'completed',
						type: 'checkbox',
					},
					{
						name: 'status',
						type: 'status',
					},
					{
						fullWidth: true,
						name: 'submit',
						title: 'Create Task',
						type: 'submit',
					},
				],
			}}
		/>
	);
};

CreateTaskForm.displayName = 'CreateTaskForm';

Here's what's happening in the file above:

Line 8: We import the JsonGraphqlForm from the BlueBase context. This component was added to our app by the @bluebase/plugin-json-graphql-components plugin.
Line 15: We create a callback function, that will be called once the form is successfully submitted to the API. Here we want to navigate to the main page after success.
Line 19: If the output data of the form is different from what the API expects, we can define a function to map it to the right format. In this case, the form inputs a single task object, but the API expects an array. So we do the conversion here. This function is passed as a prop to the JsonGraphqlForm component.
Line 26: We pass our mutation to the form. This will be called when the form is submitted.
Line 31: This is our JSON schema that generates the form. Check the plugin docs for more information on its API.

Finally, we create the index file to export the component:

src/components/CreateTaskForm/index.ts

export * from './CreateTaskForm';

import { CreateTaskForm } from './CreateTaskForm';
export default CreateTaskForm;

Step 5: Use Form on Screen

Now that we have created our form, it's time to add it to our layout. Change the the CreateTaskScreen component match the following code:

src/screens/CreateTaskScreen/CreateTaskScreen.tsx

import React from 'react';

import CreateTaskForm from '../../components/CreateTaskForm';

export const CreateTaskScreen = () => {
	return (
		<CreateTaskForm />
	);
};

CreateTaskScreen.displayName = 'CreateTaskScreen';

We're all done. Time to take our form for a test drive. Input some data into the form and submit it.

If all goes well, you should now be redirected to the task list screen. Go to Supabase admin panel, and then to the table editor to check if the data was in fact inserted into the database.

4.2 Reading Tasks

It's time to query our API for all pending and completed tasks and display them as a list.

Step 1: Task List Item

The first step is to create a list item that will render a single task.

Let's create a new component called TaskListItem . This component will have 2 states:

Loading State: When data is loading from the database. The modern way is to show a placeholder component. To achieve this, we use the @bluebase/plugin-rn-placeholder plugin. This will add the components from the rn-placeholder library in BlueBase. Make sure you install and add this plugin to your project.
Data State: This will render the task data after it is loaded from the database. For this, we will use List.Item component.

See the following code for a reference implementation:

src/components/TaskListItem/TaskListItem.tsx

import { Checkbox, List } from '@bluebase/components';
import { getComponent, useNavigation } from '@bluebase/core';
import { PlaceholderListItemProps } from '@bluebase/plugin-rn-placeholder';
import React, { useCallback } from 'react';

import { Tasks } from '../../graphql-types';

const PlaceholderListItem = getComponent<PlaceholderListItemProps>('PlaceholderListItem');

export interface TaskListItemProps extends Tasks {
	loading?: boolean;
}

export const TaskListItem = (props: TaskListItemProps) => {
	const {
		id,
		title,
		description,
		completed,
		loading,
	} = props;

	if (loading === true) {
		return <PlaceholderListItem avatar description variant="icon" />;
	}

	const { push } = useNavigation();

	const onPress = useCallback(() => {
		push('EditTask', { taskId: id });
	}, [id]);

	return (
		<List.Item
			title={title}
			description={description}
			left={<Checkbox checked={!!completed} disabled />}
			onPress={onPress}
		/>
	);
};

TaskListItem.defaultProps = {};
TaskListItem.displayName = 'TaskListItem';

src/components/TaskListItem/index.ts

export * from './TaskListItem';

import { TaskListItem } from './TaskListItem';
export default TaskListItem;

Step 2: Task List Empty State

We also need to create a component that will be rendered when a list is empty. This component will show an empty message, as well as a call to action button to create a new task:

src/components/TaskListEmptyState/TaskListEmptyState.tsx

import { ComponentState, ComponentStateProps } from '@bluebase/components';
import { useNavigation } from '@bluebase/core';
import React, { useCallback } from 'react';

export interface TaskListEmptyStateProps extends ComponentStateProps {}

export const TaskListEmptyState = (props: TaskListEmptyStateProps) => {
	const { navigate } = useNavigation();

	const goToCreate = useCallback(() => navigate('CreateTask'), []);

	return (
		<ComponentState
			title="No tasks"
			description="Start by creating a new task"
			actionTitle="Create Task"
			imageProps={{ resizeMode: 'contain' }}
			actionOnPress={goToCreate}
			actionProps={{ size: 'small', color: 'success', variant: 'outlined' }}
			{...props}
		/>
	);
};

TaskListEmptyState.displayName = 'TaskListEmptyState';

src/components/TaskListEmptyState/index.ts

export * from './TaskListEmptyState';

import { TaskListEmptyState } from './TaskListEmptyState';
export default TaskListEmptyState;

Step 3: GraphQL Query

Now with these views out of the way, it's time to start creating the actual list. The first step is to write our GraphQL query.

We intend to create our list with infinite scrolling enabled. So, whenever new data is loaded, we need to merge it with the existing data, to show it as one list. To achieve this, we also create a function in this file called TasksCollectionQueryUpdateQueryFn .

src/components/TaskList/TasksCollectionQuery.graphql.ts

import { FetchMoreOptions } from '@apollo/client';
import gql from 'graphql-tag';

import { TasksCollectionQueryQuery } from '../../graphql-types';

export const TasksCollectionQuery = gql`
	query TasksCollectionQuery(
		$filter: tasksFilter
		$first: Int
		# $last: Int
		# $before: Cursor
		$after: Cursor
	) {
		tasksCollection(
			filter: $filter
			first: $first
			# last: $last
			# before: $before
			after: $after
		) {
			edges {
	      cursor
				node {
					id
					title
					completed
				}
			}
			pageInfo {
				endCursor
				hasNextPage
				hasPreviousPage
				startCursor
			}
		}
	}
`;

export const TasksCollectionQueryUpdateQueryFn: FetchMoreOptions<TasksCollectionQueryQuery>['updateQuery'] = (
	previousResult,
	{ fetchMoreResult }
) => {
	if (!fetchMoreResult) {
		return previousResult;
	}

	const prevEdges = previousResult.tasksCollection?.edges || [];
	const newEdges = fetchMoreResult.tasksCollection?.edges || [];

	return {
		// Put the new items at the end of the list and update `pageInfo`
		// so we have the new `endCursor` and `hasNextPage` values
		tasksCollection: {
			...previousResult.tasksCollection,

			edges: [...prevEdges, ...newEdges],

			pageInfo: {
				...previousResult.tasksCollection?.pageInfo,

				endCursor: fetchMoreResult.tasksCollection?.pageInfo?.endCursor,
				hasNextPage: !!fetchMoreResult.tasksCollection?.pageInfo?.hasNextPage,
				hasPreviousPage: !!fetchMoreResult.tasksCollection?.pageInfo?.hasPreviousPage,
				startCursor: fetchMoreResult.tasksCollection?.pageInfo?.startCursor,
			},
		},
	};
};

There is a bug in Supabase that doesn't let us send "last" and "before" params. When it is fixed, these lines should be uncommented.

Step 4: Generate Typings

We will now generate typescript interfaces for our GraphQL API. Execute the following command:

yarn graphql-codegen

This will update the file src/graphql-types.ts.

Step 5: Task List

With all the prep work now complete, let's finally create our list. For this we will use the GraphqlList component from the @bluebase/plugin-json-graphql-components plugin. This component takes care of all the heavy lifting.

We create this component with a complete prop so that we can filter task based on this value. This will be passed as a variable to the GraphQL query.

src/components/TaskList/TaskList.tsx

import { QueryResult } from '@apollo/client';
import { Divider } from '@bluebase/components';
import { getComponent } from '@bluebase/core';
import { GraphqlConnection, GraphqlListProps } from '@bluebase/plugin-json-graphql-components';
import React from 'react';
import { ListRenderItemInfo } from 'react-native';

import { Tasks, TasksCollectionQueryQuery } from '../../graphql-types';
import TaskListEmptyState from '../TaskListEmptyState';
import { TaskListItem, TaskListItemProps } from '../TaskListItem';
import { TasksCollectionQuery, TasksCollectionQueryUpdateQueryFn } from './TasksCollectionQuery.graphql';

const GraphqlList = getComponent<GraphqlListProps<TaskListItemProps, TasksCollectionQueryQuery>>('GraphqlList');

function mapQueryResultToConnection(result: QueryResult<TasksCollectionQueryQuery>) {
	return result.data?.tasksCollection as GraphqlConnection<Tasks>;
}

function renderItem({ item }: ListRenderItemInfo<TaskListItemProps>) {
	return <TaskListItem {...item} />;
}

const renderDivider = () => <Divider inset />;

export interface TaskListProps {
	completed: boolean;
}

export const TaskList = (props: TaskListProps) => {
	const { completed } = props;
	const itemsPerPage = 10;

	return (
		<GraphqlList
			key="task-list"
			pagination="infinite"
			itemsPerPage={itemsPerPage}
			query={TasksCollectionQuery}
			updateQueryInfinitePagination={TasksCollectionQueryUpdateQueryFn}
			mapQueryResultToConnection={mapQueryResultToConnection}
			renderItem={renderItem}
			ItemSeparatorComponent={renderDivider}
			ListEmptyComponent={TaskListEmptyState}
			queryOptions={{
				variables: {
					filter:{ completed: { eq: completed } }
				}
			}}
		/>
	);
};

TaskList.displayName = 'TaskList';

Create the index file:

src/components/TaskList/index.ts

export * from './TaskList';

import { TaskList } from './TaskList';
export default TaskList;

Step 6: Update screens

Last but not the least, lets add this list to the PendingTasksScreen and CompletedTasksScreen screens:

src/screens/PendingTasksScreen/PendingTasksScreen.tsx

import React from 'react';

import { TaskList } from '../../components/TaskList';

export const PendingTasksScreen = () => {
	return (
		<TaskList completed={false} />
	);
};

PendingTasksScreen.displayName = 'PendingTasksScreen';

src/screens/CompletedTasksScreen/CompletedTasksScreen.tsx

import React from 'react';

import TaskList from '../../components/TaskList';

export const CompletedTasksScreen = () => {
	return (
		<TaskList completed />
	);
};

CompletedTasksScreen.displayName = 'CompletedTasksScreen';

Refresh the app, and see it come to life. Enjoy!

Loading State

Empty State

Data State

4.3 Updating Tasks

Our users may want to edit their tasks or mark them as complete. We will have to create a form very similar to the one in Chapter 4.1. The only difference is that we need to query task data and prefill the form with it.

Step 1: Create Mutation

Let's start by creating an update mutation. This will be used when a user submits the form.

src/components/EditTaskForm/UpdateTaskMutation.graphql.ts

import gql from 'graphql-tag';

export const UpdateTaskMutation = gql`
	mutation UpdateTaskMutation(
		$id: UUID!
		$title: String
		$description: String
		$completed: Boolean
	) {
		updatetasksCollection(
			filter: { id: { eq: $id } }
			set: {
				title: $title,
				description: $description,
				completed: $completed
			}
		) {
			affectedCount
			records {
				id
				title
				description
				completed
			}
		}
	}
`;

Step 2: Generate Typings

We will now generate typescript interfaces for our GraphQL API. Execute the following command:

yarn graphql-codegen

This will update the file src/graphql-types.ts.

Step 3: Create Form

Create the following component:

src/components/EditTaskForm/EditTaskForm.tsx

import { getComponent, useNavigation } from '@bluebase/core';
import { JsonGraphqlFormProps } from '@bluebase/plugin-json-graphql-components';
import React, { useCallback } from 'react';

import {
	TasksCollectionQueryQuery,
	TasksCollectionQueryQueryVariables,
	TasksInsertInput,
	UpdateTaskMutationMutationVariables
} from '../../graphql-types';
import { TasksCollectionQuery } from '../TaskList/TasksCollectionQuery.graphql';
import { UpdateTaskMutation } from './UpdateTaskMutation.graphql';

const JsonGraphqlForm = getComponent<JsonGraphqlFormProps<any>>('JsonGraphqlForm');

export interface EditTaskFormProps {
	id: string;
}

export const EditTaskForm = (props: EditTaskFormProps) => {
	const { navigate } = useNavigation();
	const { id } = props;

	const onSuccess = useCallback(() => {
		navigate('TasksApp');
	}, []);

	const mapQueryDataToInitialValues = useCallback(
		(data: TasksCollectionQueryQuery) => {
			return data?.tasksCollection?.edges[0]?.node;
		}, []);

	const mapFormValuesToMutationVariables = useCallback(
		(task: TasksInsertInput): UpdateTaskMutationMutationVariables => {
			return {
				id: task.id,
				title: task.title,
				description: task.description,
				completed: task.completed
			};
		}, []);

	const queryVariables: TasksCollectionQueryQueryVariables = {
		filter: {
			id: { 'eq': id }
		}
	};

	return (
		<JsonGraphqlForm
			query={{
				query: TasksCollectionQuery,
				variables: queryVariables
			}}
			mutation={{
				mutation: UpdateTaskMutation,
				refetchQueries: [TasksCollectionQuery],
				awaitRefetchQueries: true
			}}
			onSuccess={onSuccess}
			mapFormValuesToMutationVariables={mapFormValuesToMutationVariables}
			mapQueryDataToInitialValues={mapQueryDataToInitialValues}
			{...props}
			schema={{
				validateOnBlur: false,
				validateOnChange: false,

				fields: [
					{
						autoFocus: true,
						label: 'Title',
						name: 'title',
						required: true,
						type: 'text',
					},
					{
						label: 'Description',
						name: 'description',
						type: 'text',
					},
					{
						label: 'Completed',
						name: 'completed',
						type: 'checkbox',
					},
					{
						name: 'status',
						type: 'status',
					},
					{
						name: 'submit',
						title: 'Update Task',
						type: 'submit',
					},
				],
			}}
		/>
	);
};

EditTaskForm.displayName = 'EditTaskForm';

Explanation:

Line 22: We take task ID as a prop. This will be used as a query variable.
Line 28: A function that takes the query result as input (array of tasks) and returns a single task. This task is used as the initial value of the form.
Line 33: A function that takes form data and converts it into mutation variables. This function is called when a user submits the form.
Line 57: We tell the GraphQL client to fetch data for our list query when the mutation is successful. If we don't do this, even after we successfully update a task, going back to the list screen will show old data. This is because Apollo will show data from its local cache. By retching a query we update the local cache.

src/components/EditTaskForm/index.ts

export * from './EditTaskForm';

import { EditTaskForm } from './EditTaskForm';
export default EditTaskForm;

Step 4: Add Form to Screen

Let's add our form to the EditTaskScreen component:

src/screens/EditTaskScreen/EditTaskScreen.tsx

import { useNavigation } from '@bluebase/core';
import React from 'react';

import EditTaskForm from '../../components/EditTaskForm';

export const EditTaskScreen = () => {
	const { getParam } = useNavigation();
	const taskId = getParam('taskId', null);

	return (
		<EditTaskForm id={taskId} />
	);
};

EditTaskScreen.displayName = 'EditTaskScreen';

When you run the app, you should results similar to the screenshot below:

4.4 Deleting Tasks

Lastly, we want to allow our users to be able to delete tasks.

Step 1: Write Mutation

Let's write a mutation to delete our task.

src/components/TaskDeleteButton/DeleteTaskMutation.graphq l.ts

import gql from 'graphql-tag';

export const DeleteTaskMutation = gql`
	mutation DeleteTaskMutation($id: UUID!) {
		deleteFromtasksCollection(filter: { id: { eq: $id } }) {
			records {
				id
			}
		}
	}
`;

Step 2: Generate Typings

We will now generate typescript interfaces for our GraphQL API. Execute the following command:

yarn graphql-codegen

This will update the file src/graphql-types.ts.

Step 3: Create Delete Button

Now lets an IconButton to delete the task.

src/components/TaskDeleteButton/TaskDeleteButton.tsx

import { useMutation } from '@apollo/client';
import { IconButton } from '@bluebase/components';
import { useNavigation, useTheme } from '@bluebase/core';
import React, { useCallback } from 'react';

import { DeleteTaskMutationMutation } from '../../graphql-types';
import { TasksCollectionQuery } from '../TaskList/TasksCollectionQuery.graphql';
import { DeleteTaskMutation } from './DeleteTaskMutation.graphql';

export interface TaskDeleteButtonProps {
	id: string
}

export const TaskDeleteButton = (props: TaskDeleteButtonProps) => {
	const { id } = props;
	const { theme } = useTheme();
	const { navigate } = useNavigation();

	const onCompleted = useCallback(() => {
		navigate('TasksApp');
	}, []);

	const [deleteTask, { loading }] = useMutation<DeleteTaskMutationMutation>(DeleteTaskMutation, {
		onCompleted,
		refetchQueries: [TasksCollectionQuery],
		awaitRefetchQueries: true,
		variables: { id }
	});

	return (
		<IconButton
			name="delete"
			onPress={deleteTask}
			color={theme.palette.text.secondary}
			disabled={loading}
		/>
	);
};

TaskDeleteButton.displayName = 'TaskDeleteButton';

src/components/TaskDeleteButton/index.ts

export * from './TaskDeleteButton';

import { TaskDeleteButton } from './TaskDeleteButton';
export default TaskDeleteButton;

Step 4: Add Button to EditTaskScreen

Modify the EditTaskScreen to add the headerRight option:

{
	name: 'EditTask',
	screen: 'EditTaskScreen',
	path: 't/:taskId',
	exact: true,
	
	options: ({ route }: any) => ({
		title: 'Edit Task',
		headerRight: () => <TaskDeleteButton id={route.params.taskId} />
	}),
},

This should be the result:

4.1 Creating Tasks

The first thing to do would be to create a form to insert a new task in the database.

BlueBase provides a utility to create forms quickly by just writing a simple JSON-based schema. Let's get right to it.

Step 1: Install the plugin

Add the following plugin as a dependency to the project:

yarn add @bluebase/plugin-json-graphql-components

Then import and use this plugin to BlueBase:

plugins.ts

import BlueBasePluginApollo from '@bluebase/plugin-apollo';
import BlueBasePluginJsonGraphqlComponents from '@bluebase/plugin-json-graphql-components';
import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginMaterialUI from '@bluebase/plugin-material-ui';
import BlueBasePluginReactRouter from '@bluebase/plugin-react-router';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

import Plugin from './src';

export const plugins = [
	BlueBasePluginApollo,
	BlueBasePluginJsonGraphqlComponents,
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginMaterialUI,
	BlueBasePluginReactRouter,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,

	Plugin,
	BlueBasePluginSettingsApp,
];

plugins.native.ts

import BlueBasePluginApollo from '@bluebase/plugin-apollo';
import BlueBasePluginJsonGraphqlComponents from '@bluebase/plugin-json-graphql-components';
import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginReactNativePaper from '@bluebase/plugin-react-native-paper';
import BlueBasePluginReactNavigation from '@bluebase/plugin-react-navigation';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

import Plugin from './src';

export const plugins = [
	BlueBasePluginApollo,
	BlueBasePluginJsonGraphqlComponents,
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginReactNativePaper,
	BlueBasePluginReactNavigation,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,

	Plugin,
	BlueBasePluginSettingsApp,
];

Step 2: Create Mutation

Now we're going to write a GraphQL mutation to insert a new task in the database. Create the following file.

src/components/CreateTaskForm/CreateTaskMutation.graphql. ts

import gql from 'graphql-tag';

export const CreateTaskMutation = gql`
	mutation CreateTaskMutation ($tasks: [tasksInsertInput!]!){
		insertIntotasksCollection(objects: $tasks) {
			records {
				id
				title
				description
				completed
			}
		}
	}
`;

This tutorial does not cover how GraphQL works. If you are new to it, head over to this official tutorial.

Step 3: Generate Typings

We will now generate typescript interfaces for our GraphQL API. Execute the following command:

yarn graphql-codegen

This will create a new file at: src/graphql-types.ts.

Step 4: Create Form

Create the follwing files:

src/components/CreateTaskForm/CreateTaskForm.tsx

import { getComponent, useNavigation } from '@bluebase/core';
import { JsonGraphqlFormProps } from '@bluebase/plugin-json-graphql-components';
import React, { useCallback } from 'react';

import { CreateTaskMutationMutationVariables, TasksInsertInput } from '../../graphql-types';
import { CreateTaskMutation } from './CreateTaskMutation.graphql';

const JsonGraphqlForm = getComponent<JsonGraphqlFormProps<TasksInsertInput>>('JsonGraphqlForm');

export interface CreateTaskFormProps {}

export const CreateTaskForm = (props: CreateTaskFormProps) => {
	const { navigate } = useNavigation();

	const onSuccess = useCallback(() => {
		navigate('TasksApp');
	}, []);

	const mapFormValuesToMutationVariables = useCallback(
		(task: TasksInsertInput): CreateTaskMutationMutationVariables => {
			return { tasks: [task] };
		}, []);

	return (
		<JsonGraphqlForm
			mutation={{
				mutation: CreateTaskMutation
			}}
			onSuccess={onSuccess}
			mapFormValuesToMutationVariables={mapFormValuesToMutationVariables}
			{...props}
			schema={{
				validateOnBlur: false,
				validateOnChange: false,

				fields: [
					{
						autoFocus: true,
						label: 'Title',
						name: 'title',
						required: true,
						type: 'text',
					},
					{
						label: 'Description',
						name: 'description',
						type: 'text',
					},
					{
						label: 'Completed',
						name: 'completed',
						type: 'checkbox',
					},
					{
						name: 'status',
						type: 'status',
					},
					{
						fullWidth: true,
						name: 'submit',
						title: 'Create Task',
						type: 'submit',
					},
				],
			}}
		/>
	);
};

CreateTaskForm.displayName = 'CreateTaskForm';

Here's what's happening in the file above:

Line 8: We import the JsonGraphqlForm from the BlueBase context. This component was added to our app by the @bluebase/plugin-json-graphql-components plugin.
Line 15: We create a callback function, that will be called once the form is successfully submitted to the API. Here we want to navigate to the main page after success.
Line 19: If the output data of the form is different from what the API expects, we can define a function to map it to the right format. In this case, the form inputs a single task object, but the API expects an array. So we do the conversion here. This function is passed as a prop to the JsonGraphqlForm component.
Line 26: We pass our mutation to the form. This will be called when the form is submitted.
Line 31: This is our JSON schema that generates the form. Check the plugin docs for more information on its API.

Finally, we create the index file to export the component:

src/components/CreateTaskForm/index.ts

export * from './CreateTaskForm';

import { CreateTaskForm } from './CreateTaskForm';
export default CreateTaskForm;

Step 5: Use Form on Screen

Now that we have created our form, it's time to add it to our layout. Change the the CreateTaskScreen component match the following code:

src/screens/CreateTaskScreen/CreateTaskScreen.tsx

import React from 'react';

import CreateTaskForm from '../../components/CreateTaskForm';

export const CreateTaskScreen = () => {
	return (
		<CreateTaskForm />
	);
};

CreateTaskScreen.displayName = 'CreateTaskScreen';

We're all done. Time to take our form for a test drive. Input some data into the form and submit it.

If all goes well, you should now be redirected to the task list screen. Go to Supabase admin panel, and then to the table editor to check if the data was in fact inserted into the database.

4.2 Reading Tasks

It's time to query our API for all pending and completed tasks and display them as a list.

Step 1: Task List Item

The first step is to create a list item that will render a single task.

Let's create a new component called TaskListItem . This component will have 2 states:

Loading State: When data is loading from the database. The modern way is to show a placeholder component. To achieve this, we use the @bluebase/plugin-rn-placeholder plugin. This will add the components from the rn-placeholder library in BlueBase. Make sure you install and add this plugin to your project.
Data State: This will render the task data after it is loaded from the database. For this, we will use List.Item component.

See the following code for a reference implementation:

src/components/TaskListItem/TaskListItem.tsx

import { Checkbox, List } from '@bluebase/components';
import { getComponent, useNavigation } from '@bluebase/core';
import { PlaceholderListItemProps } from '@bluebase/plugin-rn-placeholder';
import React, { useCallback } from 'react';

import { Tasks } from '../../graphql-types';

const PlaceholderListItem = getComponent<PlaceholderListItemProps>('PlaceholderListItem');

export interface TaskListItemProps extends Tasks {
	loading?: boolean;
}

export const TaskListItem = (props: TaskListItemProps) => {
	const {
		id,
		title,
		description,
		completed,
		loading,
	} = props;

	if (loading === true) {
		return <PlaceholderListItem avatar description variant="icon" />;
	}

	const { push } = useNavigation();

	const onPress = useCallback(() => {
		push('EditTask', { taskId: id });
	}, [id]);

	return (
		<List.Item
			title={title}
			description={description}
			left={<Checkbox checked={!!completed} disabled />}
			onPress={onPress}
		/>
	);
};

TaskListItem.defaultProps = {};
TaskListItem.displayName = 'TaskListItem';

src/components/TaskListItem/index.ts

export * from './TaskListItem';

import { TaskListItem } from './TaskListItem';
export default TaskListItem;

Step 2: Task List Empty State

We also need to create a component that will be rendered when a list is empty. This component will show an empty message, as well as a call to action button to create a new task:

src/components/TaskListEmptyState/TaskListEmptyState.tsx

import { ComponentState, ComponentStateProps } from '@bluebase/components';
import { useNavigation } from '@bluebase/core';
import React, { useCallback } from 'react';

export interface TaskListEmptyStateProps extends ComponentStateProps {}

export const TaskListEmptyState = (props: TaskListEmptyStateProps) => {
	const { navigate } = useNavigation();

	const goToCreate = useCallback(() => navigate('CreateTask'), []);

	return (
		<ComponentState
			title="No tasks"
			description="Start by creating a new task"
			actionTitle="Create Task"
			imageProps={{ resizeMode: 'contain' }}
			actionOnPress={goToCreate}
			actionProps={{ size: 'small', color: 'success', variant: 'outlined' }}
			{...props}
		/>
	);
};

TaskListEmptyState.displayName = 'TaskListEmptyState';

src/components/TaskListEmptyState/index.ts

export * from './TaskListEmptyState';

import { TaskListEmptyState } from './TaskListEmptyState';
export default TaskListEmptyState;

Step 3: GraphQL Query

Now with these views out of the way, it's time to start creating the actual list. The first step is to write our GraphQL query.

src/components/TaskList/TasksCollectionQuery.graphql.ts

import { FetchMoreOptions } from '@apollo/client';
import gql from 'graphql-tag';

import { TasksCollectionQueryQuery } from '../../graphql-types';

export const TasksCollectionQuery = gql`
	query TasksCollectionQuery(
		$filter: tasksFilter
		$first: Int
		# $last: Int
		# $before: Cursor
		$after: Cursor
	) {
		tasksCollection(
			filter: $filter
			first: $first
			# last: $last
			# before: $before
			after: $after
		) {
			edges {
	      cursor
				node {
					id
					title
					completed
				}
			}
			pageInfo {
				endCursor
				hasNextPage
				hasPreviousPage
				startCursor
			}
		}
	}
`;

export const TasksCollectionQueryUpdateQueryFn: FetchMoreOptions<TasksCollectionQueryQuery>['updateQuery'] = (
	previousResult,
	{ fetchMoreResult }
) => {
	if (!fetchMoreResult) {
		return previousResult;
	}

	const prevEdges = previousResult.tasksCollection?.edges || [];
	const newEdges = fetchMoreResult.tasksCollection?.edges || [];

	return {
		// Put the new items at the end of the list and update `pageInfo`
		// so we have the new `endCursor` and `hasNextPage` values
		tasksCollection: {
			...previousResult.tasksCollection,

			edges: [...prevEdges, ...newEdges],

			pageInfo: {
				...previousResult.tasksCollection?.pageInfo,

				endCursor: fetchMoreResult.tasksCollection?.pageInfo?.endCursor,
				hasNextPage: !!fetchMoreResult.tasksCollection?.pageInfo?.hasNextPage,
				hasPreviousPage: !!fetchMoreResult.tasksCollection?.pageInfo?.hasPreviousPage,
				startCursor: fetchMoreResult.tasksCollection?.pageInfo?.startCursor,
			},
		},
	};
};

There is a bug in Supabase that doesn't let us send "last" and "before" params. When it is fixed, these lines should be uncommented.

Step 4: Generate Typings

We will now generate typescript interfaces for our GraphQL API. Execute the following command:

yarn graphql-codegen

This will update the file src/graphql-types.ts.

Step 5: Task List

We create this component with a complete prop so that we can filter task based on this value. This will be passed as a variable to the GraphQL query.

src/components/TaskList/TaskList.tsx

import { QueryResult } from '@apollo/client';
import { Divider } from '@bluebase/components';
import { getComponent } from '@bluebase/core';
import { GraphqlConnection, GraphqlListProps } from '@bluebase/plugin-json-graphql-components';
import React from 'react';
import { ListRenderItemInfo } from 'react-native';

import { Tasks, TasksCollectionQueryQuery } from '../../graphql-types';
import TaskListEmptyState from '../TaskListEmptyState';
import { TaskListItem, TaskListItemProps } from '../TaskListItem';
import { TasksCollectionQuery, TasksCollectionQueryUpdateQueryFn } from './TasksCollectionQuery.graphql';

const GraphqlList = getComponent<GraphqlListProps<TaskListItemProps, TasksCollectionQueryQuery>>('GraphqlList');

function mapQueryResultToConnection(result: QueryResult<TasksCollectionQueryQuery>) {
	return result.data?.tasksCollection as GraphqlConnection<Tasks>;
}

function renderItem({ item }: ListRenderItemInfo<TaskListItemProps>) {
	return <TaskListItem {...item} />;
}

const renderDivider = () => <Divider inset />;

export interface TaskListProps {
	completed: boolean;
}

export const TaskList = (props: TaskListProps) => {
	const { completed } = props;
	const itemsPerPage = 10;

	return (
		<GraphqlList
			key="task-list"
			pagination="infinite"
			itemsPerPage={itemsPerPage}
			query={TasksCollectionQuery}
			updateQueryInfinitePagination={TasksCollectionQueryUpdateQueryFn}
			mapQueryResultToConnection={mapQueryResultToConnection}
			renderItem={renderItem}
			ItemSeparatorComponent={renderDivider}
			ListEmptyComponent={TaskListEmptyState}
			queryOptions={{
				variables: {
					filter:{ completed: { eq: completed } }
				}
			}}
		/>
	);
};

TaskList.displayName = 'TaskList';

Create the index file:

src/components/TaskList/index.ts

export * from './TaskList';

import { TaskList } from './TaskList';
export default TaskList;

Step 6: Update screens

Last but not the least, lets add this list to the PendingTasksScreen and CompletedTasksScreen screens:

src/screens/PendingTasksScreen/PendingTasksScreen.tsx

import React from 'react';

import { TaskList } from '../../components/TaskList';

export const PendingTasksScreen = () => {
	return (
		<TaskList completed={false} />
	);
};

PendingTasksScreen.displayName = 'PendingTasksScreen';

src/screens/CompletedTasksScreen/CompletedTasksScreen.tsx

import React from 'react';

import TaskList from '../../components/TaskList';

export const CompletedTasksScreen = () => {
	return (
		<TaskList completed />
	);
};

CompletedTasksScreen.displayName = 'CompletedTasksScreen';

Refresh the app, and see it come to life. Enjoy!