Playground

The playground can be found within caisy and can be accessed through the main navigation. You are already authenticated with your current session token.

On this screen, you will also find the URL of your GraphQL endpoint, which includes your project ID, for example:

https://cloud.caisy.io/api/v3/e/aa0943f2-af8e-4920-afe5-96e7c6fb7b01/graphql

If you want to connect from an external GraphQL client, you will need either a personal access token or an API key (which is recommended). To create one, refer to this:

Once you have your APIKEY, you need to set up a GraphQL client in your project. Here's an example of how to do this with graphql-request:

To install graphql-request, run npm install graphql-request or yarn add graphql-request.

After using the library, your code might look like this:

import { GraphQLClient, gql } from 'graphql-request'

async function main() {
  const graphQLClient = new GraphQLClient(process.env.CAISY_GQL_ENDPOINT, {
    headers: {
      "x-caisy-apikey": process.env.CAISY_API_KEY,
    },
  })

  const query = gql`
		query MyQuery {
		  allPage {
		    edges {
		      node {
		        slug
		        id
		      }
		    }
		  }
		}
  `

  const data = await graphQLClient.request(query)
  console.log(JSON.stringify(data, undefined, 2))
}

main().catch((error) => console.error(error))  

We can also make GraphQL requests using the built-in HTTP client. In the browser, we would use fetch for this. Here's an example with a hard-coded project ID and API key. It's recommended to give the API key only read permissions.

const query = `
  query MyQuery {
    allAsset {
      edges {
        node {
          title
          src
        }
      }
    }
  }
`;

const response = await fetch(
  `https://cloud.caisy.io/api/v3/e/bc913841-29c6-4145-8920-cdaf38bfd2ef/graphql`,
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      "x-caisy-apikey": "nHfaGj3djVm0mVQjZIXHsgeoSM3HQJEc",
    },
    body: JSON.stringify({
      query: query,
    }),
  },
);

const data = await response.json();

Try example in action: https://stackblitz.com/edit/caisy-raw-fetch-js-sample

While this example provides a basic overview of how a GraphQL request works without any dependencies, it's beneficial to understand the underlying tech stack foundations. However, in a real-world project, you would likely want to load the API key and project ID from the environment and use a library to ensure type safety for your GraphQL queries together with typescript.