Structure

Each module might contain multiple files. To make them easier to navigate the postfix notation file naming convention has been introduced. The following rules apply:

• The React Components are only used for rendering. They are highlighted in the code by .component postfix.

• The data is requested directly from HOCs (Higher Order Components). There is no "frontend-backend" for data requesting, thus the data is handled by the client (browser). These components are highlighted in the code by .container file name postfix.

• Data is requested from Backend using the @scandipwa/graphql. It contains dynamic GraphQl query building logic, which allows for class-based GraphQl query declaration. These classes are highlighted in code by .query file name postfixes.

• To process GraphQl responses into usable data-structures the data processors are used. They are highlighted in the code by .processor filename postfix. Usually, they are a simple function which modify argument passed inside (a subject to change).

• To circumvent the issue of deep props passing chains the React Context API is used, therefore entities are first requested from HOCs then passed into Context Providers (React Components Wrapping React Context Providers). The Context providers and Context declarations are highlighted in code by .provider and .context postfixes in file names.

• To circumvent the issues with Webpack bundle size all commonly used constants are moved into separate files with .config postfix.

To group the components, utility functions, and data following folders in the project src could be introduced:

• api - contains types, queries, and processors.

• component - contains Containers, Components, and Configs for each component.

• context - contains context and context provider declarations.

• plugin - contains application plugins.

Data flow

Common data-flow diagram

Following steps are present between entities:

1. The query is sent to HOC

2. HOC makes a request to Shopify GraphQl API passing the query to get and receives the response

3. HOC passes the response to the processor which returns the processed product back

4. HOC passes the processed data to Context Provider

5. Context Provider calculates the context value and passes it to the context

6. Finally, component updates receiving the data directly from HOC and Context it is consuming

Heads up!

Steps 4) and 5) might be skipped, if data is not set into the context. Then, the component would update directly with data coming from HOC.