Connections

The Connections section covers everything related to the @twlgroup/onspot-connections-ui-beta library and communication between the frontend and backend services.

Content

🔗 Introduction to Onspot Connections

Overview of the connections library, its purpose and main functionalities.

Includes:

• What is Onspot Connections
• Installation and basic configuration
• Library architecture
• Fundamental concepts

⚙️ Requirements and Considerations

Technical configuration, development requirements and best practices for working with the library.

Includes:

• Configuration of the .npmrc file
• Backend connection for npm run generate
• New version publishing process
• Security considerations

---

Main Features

• 🔌 Preconfigured Hooks: Ready-to-use hooks with Onspot APIs
• 📡 State Management: Automatic handling of loading, errors and data
• 🔐 Authentication: Integration with authentication systems
• 🛠️ GraphQL Utilities: Tools for working with Apollo Client
• ⚡ Optimized: Performance optimized for Onspot applications

Technologies

• Apollo Client - GraphQL client
• React Hooks - State and effects management
• TypeScript - Strong typing
• GraphQL Code Generator - Automatic type generation

Installation

npm install @twlgroup/onspot-connections-ui-beta

Note: Requires prior configuration of the .npmrc file to access the private GitHub registry.

Basic Usage

import { useUser, useGraphQLClient } from "@twlgroup/onspot-connections-ui-beta";

const MyComponent = () => {
  const { user, onLogOut } = useUser({
    urlRedirectInLogut: "/ingresar",
  });
  
  const client = useGraphQLClient();

  return (
    <div>
      <p>User: {user?.name}</p>
      <button onClick={onLogOut}>Logout</button>
    </div>
  );
};

Main Hooks

• useUser - User and authentication management
• useGraphQLClient - Configured Apollo client
• useActionError - Global error handling
• Entity-specific hooks - For CRUD operations

Getting Started

1. Configure the .npmrc file for private registry access
2. Read the Introduction to understand basic concepts
3. Review the Requirements for complete configuration
4. Implement the hooks in your application according to the examples

GraphQL Configuration

The library is designed to work with GraphQL Code Generator:

# codegen.yaml
schema: "https://your-backend.com/graphql"
documents: "src/graphql/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"

Run npm run generate to automatically generate types and hooks.