Composabase Local Development - Default template

Welcome to the Default template for the Composabase local playground. This guide will help you get started with the setup and usage of this on your local environment.

Getting Started

Prerequisites

Before you begin, make sure you have cloned your project repository.

SSH:

git clone $REPO_SSH_URL

HTTPS:

git clone $REPO_URL

Next, install the project dependencies using one of the following commands:

yarn

or

npm install

To interact with this template, you need to use the Composabase CLI, which should be installed globally. To install it, run one of the following commands:

yarn global add @composabase/cli

or

npm install -g @composabase/cli

Logging In

As the first step, you will need to login to the Composabase Dashboard in your terminal. Use the following command:

composabase login

Fetching Environment Variables

After logging in, next step will fetch the necessary environment variables from the Composabase Dashboard using this command:

composabase pull:env

Pull GraphQL schema

Pull GraphQL schema from your Composabase project. This command will create the GraphQL schema file in the @composabase/client directory.

composabase pull:schema

This step ensures that your local GraphQL schema definitions are up-to-date.

Starting the Local Playground

Finally, you can start the local development environment using the following command:

yarn start

or

npm run start

This command launches the development server and allows you to begin working with your GraphQL queries and resolvers locally.

Testing the Local Payground

If everything went well, you should be able to access the Composabase GraphQL Playground at http://localhost:4000.

As part of this template we added some custom resolvers. You can find them in the src/graphql folder.

The hello query

This query returns a simple string.

Arguments:

• name: String
• isImportant: Boolean

You can test it by executing the following query in the GraphQL Playground:

query hello {
  hello(name: "John Doe", isImportant: true)
}

And will answer with the following response:

{
  "data": {
    "hello": "Hello John Doe!"
  }
}

You can find this code example at the followig paths:

• Schema: src/graphql/schema.ts
• Resolver: src/graphql/resolvers/queries/hello.ts

The helloCustom query

This query returns a simple string

Arguments:

• input: MyCustomInput
  • name: String
  • isImportant: Boolean

You can test it by executing the following query in the GraphQL Playground:

query helloCustom {
  helloCustom(input: { name: "Composabase", isImportant: true })
}

And will answer with the following response:

{
  "data": {
    "helloCustom": "Hello Composabase!"
  }
}

You can find this code example at the followig paths:

• Schema: src/graphql/modules/hello-custom/index.ts
• Resolver: src/graphql/modules/hello-custom/resolvers/queries/hello.ts

Remember that this guide assumes you have basic familiarity with command-line tools and development environments. If you encounter any issues, refer to the Composabase documentation or seek assistance from our support team.

Happy coding!