Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking β€œSign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(IN-3538): orchestration #6965

Merged
merged 33 commits into from
Oct 5, 2023
Merged
Changes from 1 commit
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
97aaa27
feat: add orchestration possibility via context
WojtekTheWebDev Sep 25, 2023
77de14c
ci: fix scripts
WojtekTheWebDev Sep 25, 2023
bf4f3db
fix: husky precommit fix
WojtekTheWebDev Sep 25, 2023
67fecd4
chore: add changesets
WojtekTheWebDev Sep 25, 2023
e9c8469
docs: add guide
WojtekTheWebDev Sep 25, 2023
5959c4f
chore: trigger prerelease mode
WojtekTheWebDev Sep 25, 2023
b883694
chore: upgrade packages
WojtekTheWebDev Sep 27, 2023
407590e
test: remove tricky interfaces
WojtekTheWebDev Sep 27, 2023
3e38c82
fix: remove singleton app from createServer
WojtekTheWebDev Sep 27, 2023
cd90bfe
tests: add integration tests for orchestration
WojtekTheWebDev Sep 27, 2023
a8fe118
chore: bump version
WojtekTheWebDev Sep 27, 2023
ee7fae7
fix tests
WojtekTheWebDev Sep 27, 2023
a707847
refactor: replace getIntegration with getApiClient
WojtekTheWebDev Sep 27, 2023
8aeafe2
add changeset
WojtekTheWebDev Sep 27, 2023
4cf483f
chore: bump package version
WojtekTheWebDev Sep 27, 2023
5c1bc24
fix: contextualized api in api client type
WojtekTheWebDev Sep 28, 2023
c13dc04
chore: add changeset and bump version
WojtekTheWebDev Sep 28, 2023
88a1e08
chore: remove deprecation from api instance
WojtekTheWebDev Sep 28, 2023
43c564b
fix remove extension from integration context
WojtekTheWebDev Sep 28, 2023
5956dcc
IN-3538 Add unit test for error handling
WojtekTheWebDev Sep 28, 2023
e3ccd1e
feat: improve orchestration guide
rohrig Oct 2, 2023
61c9c8b
chore: extend IntegrationContext by Partial<MiddlewareContext>
WojtekTheWebDev Oct 2, 2023
fa9e213
chore: remove partial extension of IntegrationContext
WojtekTheWebDev Oct 2, 2023
121bf70
ci: release (rc) (#6968)
github-actions[bot] Oct 2, 2023
358b257
fix: Extend IntegrationContext type with MiddlewareContext
WojtekTheWebDev Oct 3, 2023
ace5876
docs: update orchestration docs
WojtekTheWebDev Oct 3, 2023
a881e99
Update docs/content/3.middleware/2.guides/4.orchestration.md
WojtekTheWebDev Oct 4, 2023
0ba2e2e
chore: improve docs. format steps
rohrig Oct 4, 2023
b7609cb
chore: revert steps because sytax not working
rohrig Oct 4, 2023
a6774c1
Merge branch 'main' into feat/orchestration
WojtekTheWebDev Oct 5, 2023
f8e2099
fix: ApiClient with raw API mapping
WojtekTheWebDev Oct 5, 2023
bfee89b
chore: update changelog
WojtekTheWebDev Oct 5, 2023
4e9c427
test: fix tests
WojtekTheWebDev Oct 5, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs: add guide
WojtekTheWebDev committed Sep 25, 2023
commit e9c846901b41988f3c21f83b7aa858ca004e244a
126 changes: 126 additions & 0 deletions docs/content/3.middleware/2.guides/4.orchestration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
# Orchestration

Orchestration is a powerful way to optimize server requests. This guide will take you through the key aspects of using the orchestration feature, focusing on integrating extensions and how to get the best out of your frontend code.

## The `getIntegration` Method

If you want to retrieve a loaded integration within the context of another, you can use the `getIntegration` method. This method serves as a bridge between various integrations, ensuring seamless data flow and interaction.

Usage:

```javascript
const sapcc = context.getIntegration("sapcc");
```

The `getIntegration` method takes a single argument, which is the key of the integration you wish to retrieve. This is the key you would define in the `middleware.config.js` file for the integration you wish to retrieve. The key is essentially an identifier for the integration.

Here's a basic example of what this might look like:

```javascript
export const integrations = {
sapcc: {
location: "@vsf-enterprise/sapcc-api/server",
configuration: {
// ...
},
extensions: (extensions) => [
...extensions,
{
name: "sapcc-contentful-extension",
extendApiMethods: {
getPDP: async (context, params) => {
const sapcc = context.getIntegration("sapcc");
const contentful = context.getIntegration("contentful");

const [product, content] = Promise.all(
sapcc.api.getProduct({ id: params.id }),
contentful.api.getEntries({
content_type: "product",
"fields.sku": params.id,
})
);

return {
product,
content,
};
},
},
},
],
},
contentful: {
location: "@vue-storefront/contentful-api/server",
WojtekTheWebDev marked this conversation as resolved.
Show resolved Hide resolved
configuration: {
// ...
},
},
};
```

## Orchestration for Frontend Optimization

One of the primary advantages of orchestration is the ability to combine multiple requests into a single endpoint. This can drastically reduce the overhead on the frontend, especially in applications where numerous server requests might be initiated simultaneously.

### Benefits:

- Reduced Network Calls: Fewer calls to the server means reduced latency and faster performance.
- Simplified Frontend Logic: Grouping related server requests can help simplify frontend code and logic.
- Consistent Data Retrieval: With orchestration, you can ensure data from multiple integrations is fetched consistently and returned in a unified format.

### Implementation:

1. Extend the integration with new endpoint: Create a new endpoint that will act as the main entry point for the grouped requests.

2. Group Server Requests: Within this endpoint, utilize the `getIntegration` method to retrieve and interact with the required integrations.

3. Aggregate Data: Once data from all required integrations is retrieved, aggregate and format it as needed.

4. Return Unified Response: Send a consolidated response back to the frontend.

Example:

```javascript
export const integrations = {
sapcc: {
location: "@vsf-enterprise/sapcc-api/server",
configuration: {
// ...
},
extensions: (extensions) => [
...extensions,
{
name: "sapcc-contentful-extension",
extendApiMethods: {
getPDP: async (context, params) => {
const sapcc = context.getIntegration("sapcc");
const contentful = context.getIntegration("contentful");

const [product, content] = Promise.all(
sapcc.api.getProduct({ id: params.id }),
contentful.api.getEntries({
content_type: "product",
"fields.sku": params.id,
})
);

return {
product,
content,
};
},
},
},
],
},
contentful: {
location: "@vue-storefront/contentful-api/server",
configuration: {
// ...
},
},
};
```

### Conclusion
WojtekTheWebDev marked this conversation as resolved.
Show resolved Hide resolved
Orchestration provides a powerful way to optimize frontend requests, especially in scenarios where multiple integrations need to be queried. By understanding the `getIntegration` method and the associated configuration, developers can create efficient, streamlined solutions for their applications.