Introduction

ROQ One Frontend can send queries and mutations to ROQ One Backend and also do queries to ROQ Platform:

How it works

To conduct a query or mutation, you can use the requestGql function like shown in the example below. We recommend that you perform these requests from within hooks and not directly from the React components. This helps to keep your code clean; you can learn more at Directory structure (frontend) .

import { gql } from '@apollo/client';
import { requestGql } from 'modules/common/utils/request-gql';

  const handleBookCreate = async (variables: BookCreateMutationVariablesInterface) => {
    const { id } = await requestGql<{ id: string }>(
      {
        mutation: gql`
          mutation createBookMutation($data: BookCreateDto!) {
            createBook(book: $data) {
              id
            }
          }
        `,
        variables: { data: variables },
      },
      null,
      'createBook',
    );
TYPESCRIPT

The requestGql function allows to set a responseKey (which is 'createBook' in the example above). This parameter is used as a key in the response.

Query ROQ Platform

This function can be used to interact with ROQ One Backend and ROQ Platform. You can define the used service in the context by adding context: { service: 'platform' }, like this:

      requestGql<UseSendInvitesResponse>(
        {
          mutation: gql`
            mutation CreateUserInvites($userInvites: UserInvitesCreateDto!) {...}
          `,
          variables: {...},
          context: { service: 'platform' },
        },
        null,
        'sendUserInvites',
      ),
TYPESCRIPT

If you don’t define the service then ROQ One Backend is used.