@cscart/core is a library with core services for build project for cs-cart Enterprise. Many of services built for CSR projects, but you can find helpful tools for SSR projects.

Install

1. Install the package: yarn add @cscart/core

2. Import `ImportMapResolver`` from the core:

import { ImportMapResolver } from '@cscart/core'

const importMapResolver = new ImportMapResolver()

Check that you using importmaps or you can write your own service to handle ESM imports, just implement IImportMapResolver interface.

3. Import `ModuleService`` from the core:

import { ImportMapResolver, ModuleService } from '@cscart/core'


const importMapResolver = new ImportMapResolver()
const moduleService = new ModuleService(importMapResolver)

4. Import ImportResolver from the core:

import { ImportMapResolver, ModuleService } from '@cscart/core'


const importMapResolver = new ImportMapResolver()
const moduleService = new ModuleService(importMapResolver)


const queryImportResolver = new ImportResolver(moduleService)
const fragmentImportResolver = new ImportResolver(moduleService)

5. Configure Apollo:

  /*
   create a FragmentRegistry
   https://www.apollographql.com/docs/react/data/fragments/#registering-named-fragments-using-createfragmentregistry
  */
  const fragmentRegistryAPI = createFragmentRegistry()

  /*
    Configure apollo cache
  */
  const cache = new InMemoryCache({
    fragments: fragmentRegistryAPI,
    addTypename: false,
  })

  /* 
    And apollo client
  */
  const client = new ApolloClient({
    uri: 'https://flyby-router-demo.herokuapp.com/',
    cache,
  })

6. Import SchemaService from the core:

import { ImportMapResolver, ModuleService, SchemaService } from '@cscart/core'


const importMapResolver = new ImportMapResolver()
const moduleService = new ModuleService(importMapResolver)


const queryImportResolver = new ImportResolver(moduleService)
const fragmentImportResolver = new ImportResolver(moduleService)

export const schemaService = new SchemaService(
  queryImportResolver,
  fragmentImportResolver,
  fragmentRegistryAPI,
  cache.policies,
)

7. Connect service to your components:

import React from 'react';
import * as ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';
import { schemaService } from './schemaService'

const client = new ApolloClient({
  uri: 'https://flyby-router-demo.herokuapp.com/',
  cache: new InMemoryCache(),
});

// Supported in React 18+
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <SchemaServiceProvider
      client={adminClient}
      schemaService={schemaService}
    >
    <App />
  </SchemaServiceProvider>,
);

8. Use schemas at your components with withQuerySchema:

Develop

All develop should be done through tests

Run test

yarn workspace @cscart/core test

or

yarn workspace @cscart/core test --watch

Build

yarn workspace @cscart/core build