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

Extract logic from application-shell to application-shell-connector package #3245

Conversation

CarlosCortizasCT
Copy link
Contributor

@CarlosCortizasCT CarlosCortizasCT commented Oct 2, 2023

Summary

Extract logic from application-shell to application-shell-connector package

Description

In the source PR (#3242) we included the new CustomViewSelector component in the application-shell package but this leads to a circular dependency between that one and the application-components package.
We are ok with the former depending on the latter, but not the other way around.

The problem is that this new component (CustomViewSelector) is going to be used from all page components (which live in the application-components packages) but it is the first one of this kind which also needs to interact with the backend API (fetch available Custom Views for an specific view locator). This means it needs access to Apollo Graphql machinery, which is implemented in the application-shell package.

To avoid this unwanted dependency (circular) flow, we propose to move most of the Apollo Graphql machinery to the application-shell-connectors packages, which is independent and can be used from both the other two (application-shell and application-components).

The initial idea was to move the Apollo client factory function and the custom hooks to interact with the queries and mutations (useMcQuery and useMcMutation), but we need to drag some other modules which those ones depend on.

So basically in this PR we are:

  • Moving most of the stuff related to interacting with the backend using the Apollo client from the application-shell package to the application-shell-connectors one.
  • Moving both the new CustomViewSelector component and the (already existing) CustomViewSelector (the former depends on this one from application-shell to the application-components package.

Here is a schema of the proposal implemented in this PR:

image

@changeset-bot
Copy link

changeset-bot bot commented Oct 2, 2023

⚠️ No Changeset found

Latest commit: d23ae2d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Oct 2, 2023

Deploy preview for merchant-center-application-kit ready!

✅ Preview
https://merchant-center-application-8679ed16d-commercetools.vercel.app
https://appkit-sha-8eaf6b87fd6ee9d7599d7a371d1ef39ec5ee6a36.commercetools.vercel.app
https://appkit-pr-3245.commercetools.vercel.app

Built with commit d23ae2d.
This pull request is being automatically deployed with vercel-action

Copy link
Member

@emmenko emmenko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the refactor!

I pushed a couple of commits to move the constants into the constants package and keep the exported types from app shell for backwards compatiblity (and clean up the deps a bit).

@CarlosCortizasCT
Copy link
Contributor Author

Thanks for the refactor!

I pushed a couple of commits to move the constants into the constants package and keep the exported types from app shell for backwards compatiblity (and clean up the deps a bit).

Thanks a lot for your help! 🙇

Copy link
Contributor

@tdeekens tdeekens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice refactor. Makes total sense. Thanks for the diagram in the description!

@CarlosCortizasCT CarlosCortizasCT merged commit 827e7d2 into SHIELD-840-custom-views-selector Oct 5, 2023
12 checks passed
@CarlosCortizasCT CarlosCortizasCT deleted the SHIELD-840-custom-views-selector_B branch October 5, 2023 14:15
emmenko added a commit that referenced this pull request Oct 9, 2023
…r` package (#3245)

* refactor: extract apollo related utilities from app-shell to app-shell-connector package

* fix: lintin fixes

* refactor: remove unused imports

* refactor: move custom view components from app-shell to app-shell-connectors package

* refactor: move constants to constants package

* fix: keep export types for backwards compatibility

* refactor: remove unused packages from app-shell

* fix: remove unwanted depdency and fix some tests

---------

Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>
emmenko added a commit that referenced this pull request Oct 10, 2023
* refactor(application-components): first iteration on new custom views selector component

* refactor: implement custom views data fetching

* refactor: implement custom views data fetching

* fix(application-shell): fix types

* refactor: include custom views selector in all page components

* Extract logic from `application-shell` to `application-shell-connector` package (#3245)

* refactor: extract apollo related utilities from app-shell to app-shell-connector package

* fix: lintin fixes

* refactor: remove unused imports

* refactor: move custom view components from app-shell to app-shell-connectors package

* refactor: move constants to constants package

* fix: keep export types for backwards compatibility

* refactor: remove unused packages from app-shell

* fix: remove unwanted depdency and fix some tests

---------

Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>

* refactor: early return if locator code is not provided

* refactor: error handling

* refactor: remove mocks

* test(playground): add mocks and test for custom panel demo

* docs: changesets

* refactor: define message

---------

Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants