CartProvider and prop onCreate

[MichaelRise]

Hey,
I want to add discount code when user add product to cart. I think I can use onCreate property to do it.
I don't know why but, I have problems with use a onCreate prop. I read the documentation on https://shopify.dev/api/hydrogen/components/cart/cartprovider#props

Error in terminal:
ERROR: Error: Event handlers cannot be passed to client component props. Remove onCreate from these props if possible: {countryCode: undefined, onCreate: function, children: [...]}

App.server.jsx

import renderHydrogen from '@shopify/hydrogen/entry-server';
import {
  FileRoutes,
  PerformanceMetrics,
  PerformanceMetricsDebug,
  Route,
  Router,
  ShopifyAnalytics,
  ShopifyProvider,
  CartProvider,
} from '@shopify/hydrogen';

import {HeaderFallback} from '~/components';
import {DefaultSeo, NotFound} from '~/components/index.server';

function App({request}) {
  const pathname = new URL(request.normalizedUrl).pathname;
  const localeMatch = /^\/([a-z]{2})(\/|$)/i.exec(pathname);
  const countryCode = localeMatch ? localeMatch[1] : undefined;

  const isHome = pathname === `/${countryCode ? countryCode + '/' : ''}`;

  const logTest = () => {
    console.log('test');
  };

  return (
    <Suspense fallback={<HeaderFallback isHome={isHome} />}>
      <ShopifyProvider countryCode={countryCode}>
        <CartProvider countryCode={countryCode} onCreate={() => logTest}>
          <Suspense>
            <DefaultSeo />
          </Suspense>
          <Router>
            <FileRoutes
              basePath={countryCode ? `/${countryCode}/` : undefined}
            />
            <Route path="*" page={<NotFound />} />
          </Router>
        </CartProvider>
        <PerformanceMetrics />
        {import.meta.env.DEV && <PerformanceMetricsDebug />}
        <ShopifyAnalytics />
      </ShopifyProvider>
    </Suspense>
  );
}

export default renderHydrogen(App);

Unfortunately my React skills aren't good. Any suggestion how to use callback/props will be good.

[juanpprieto]

Hi @MichaelRise,

Thanks for posting. Please read this to understand the limitations of .server components.

In short, because App.server.jsx is a server component it can't have inlined functions as props in any of it's direct children. .server components are only executed in the server.

To use CartProvider callbacks, you will need to wrap it inside a client component and use the callbacks you want inside there. e.g — Create a <CartProviderUI /> compoment

CartProviderUI.client.jsx

import { CartProvider } from '@shopify/hydrogen';

// wrapper for CartProvider
export function CartProviderUI({countryCode, children}) {
 return (
   <CartProvider countryCode={countryCode} onCreate={() => console.log('cart created')}>
     {children}
   </CartProvider>
}

Then instead of importing <CartProvider /> in App.server.jsx you can import `CartProviderUI' instead.

Hope this helps.

[MichaelRise]

@juanpprieto Hey,
Thanks for help!

[this-alias]

Hi @juanpprieto, thanks for your answer above. I had a similar question:

After wrapping the server provider with a UI provider, how would you expose the CartProvider callbacks to UI functions? Would the functions need to be inside the CartProviderUI component or is there a way to pass a child component's function into the callbacks? e.g., using onCreate({openCart}) would the openCart function need to be inside the CartProviderUI component?

Perhaps I'm still not wrapping my head around server vs client providers. :)