Getting started

Introduction

The rsl-api package is here to assist you in the development of your JavaScript project, providing all the necessary queries, mutations, and types for your project.

Installation

npm install rsl-api

ApolloClient Initialization

Before starting, make sure you correctly initialize your apollo client with the corresponding HttpOptions. This package gives you a simple and efficient way to define your Apollo Client.

For a advanced ApolloClient, please refer to the Apollo Graphql Documentation.

export const initClient = (option: HttpOptions, responseLoggerHandler?: (operation: Operation) => void) : ApolloClient<NormalizedCacheObject>

| Parameter value | Type | Description | Default value | | ----------------------- | -------------------------------- | --------------------------------------- | ------------- | | httpOptions | HttpOptions | Required - ApolloClient HttpOptions | | | responseLoggerHandler | (operation: Operation) => void | Optional - Response Logger Handler | undefined |

The responseLoggerHandler parameter allow you to handle all executed GraphQL operations.

HttpOptions Configuration

This package also gives you a easy way to get basics HttpOptions if you don't know what to put in.

export const getBaseHttpOptions = (uri: string): HttpOptions => {
  return {
    uri: uri,
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": true,
    },
  };
};

Example of usage using ReactJS

// apollo/client Package
import { ApolloProvider, useQuery, Operation } from "@apollo/client";

// rsl-api Package
import { initClient, getBaseHttpOptions } from "rsl-api";
import { getCartQuery } from "rsl-api/lib/queries";

// Custom Hooks
import { useSession } from "@hooks";

// Apollo Client HttpOptions
const httpOptions = {
  uri: "https://yourdomain.com/rsl/graphql",
  headers: {
    "Content-Type": "application/json;charset=utf-8",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": true,
  },
};
//or
//const httpOptions = getBaseHttpOptions("https://yourdomain.com/rsl/graphql");

// Apollo Client
const responseLoggerHandler = (operation) => {
  //if url parameter "debug" equal "true", then display the operation in the console
  new URLSearchParams(window.location.search).get("debug") === "true" &&
    console.info(operation);
};

const client = initClient(httpOptions, responseLoggerHandler);

<ApolloProvider client={client}>
  <MyCartComponent />
</ApolloProvider>;

const MyCartComponent = () => {
  const { session } = useSession();
  const { data, error, loading } = useQuery(getCartQuery(), {
    variables: { session: { name: session } },
  });

  if (error) return <div>{error.message}</div>;

  return loading ? (
    <div>Query loading...</div>
  ) : (
    <div>
      {data?.getCart?.cart?.reservations?.map((r, i) => {
        return <div>...</div>;
      })}
    </div>
  );
};

Errors

| Error | Type | Solution | | ------------------------------------------------------------------ | -------- | ---------------------------------------------- | | CORS | server | Enable CORS from our Infrastructure department |