1 of 1

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.