Shopify / js-buy-sdk

The JS Buy SDK is a lightweight library that allows you to build ecommerce into any website. It is based on Shopify's API and provides the ability to retrieve products and collections from your shop, add products to a cart, and checkout.

Home Page:https://shopify.github.io/js-buy-sdk

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Update Type Decleartions(?)

MurmeltierS opened this issue · comments

The TypeScript Type Declarations are a far shot from whats actually delivered by the API.
How is this even possible?

I think this happens easily because the types are shipped via @types/shopify-buy and are not included in the shopify-buy package itself. Would love to see them updated though :)

@fmoessle Our intern is now tasked with writing accurate definition.

big if true

@janbaykara

We are currently in preperation of a PR for DefinitelyTyped.
Until then, our typings are available via https://www.npmjs.com/package/@brandboostinggmbh/shopify-buy-types

Simplest way to use them is via npm i @types/shopify-buy@npm:@brandboostinggmbh/shopify-buy-types

Thanks very much @MurmeltierS!

Thanks very much @MurmeltierS!

Thanks are due to our intern @einzN, who wrote most of the delcarations.

Can I please request that you add presentmentCurrencyCode as one of the props accepted in CheckoutResource for creating a checkout ??
Thanks in advance @einzN and @MurmeltierS.

Can I please request that you add presentmentCurrencyCode as one of the props accepted in CheckoutResource for creating a checkout ?? Thanks in advance @einzN and @MurmeltierS.

@einzN can you take a look at this

Dear Shopify developers,

please consider updating the type definitions for this project. Working with it in TypeScript is an absolute nightmare.

commented

The type declarations in @types/shopify-buy are now out of date.

Line item type declarations caught me off guard since the type declaration says price is accessible at lineItem.price, However they are now accessed at lineItem.variant.price.

A types.d.ts file in this project would be insanely appreciated!

Edit:
I was able to run graphql-codegen with the following config added to this projects root:

# codegen.yml
schema: ./schema.json
generates:
  ./src/types.ts:
    plugins:
      - typescript

I then added the following packages to this projects dependencies:

{
  "dependencies": {
    "@graphql-codegen/cli": "^2.6.2",
    "@graphql-codegen/typescript": "^2.4.11",
    "graphql": "^16.5.0"
  }
}

and ran this command from this projects root:

./node_modules/@graphql-codegen/cli/bin.js --config codegen.yml

This generates a typescript file with types that can be used with a bit of effort however it solved my issue. I continue to use @types/shopify-buy but if a type is wrong I can use the types from this gql hack.

Example:

// Before
TS2551: Property 'variant' does not exist on type 'LineItem'. Did you mean 'variantId'?
     99 |               userCart.lineItems.map((item) => (
    100 |                 <li key={item.id}>
  > 101 |                   {item.title} @ ${item.variant.price || '0'}
        |                                         ^^^^^^^
    102 |                 </li>
    103 |               ))
    104 |             )}
// After
// I have to cast to unknown first since old types has id as number or string whereas gql has id as string
(userCart.lineItems as unknown as CheckoutLineItem[]).map(
  (item) => (
    <li key={item.id}>
      {item.title} @ ${item.variant.price || '0'}
    </li>
  ),
)

This solution is not perfect but it provides interfaces for most objects, a good hack for now until there are official types.

Thank you @einzN!

Thanks very much @MurmeltierS!

Thanks are due to our intern @einzN, who wrote most of the delcarations.

commented

We are currently in preperation of a PR for DefinitelyTyped. Until then, our typings are available via https://www.npmjs.com/package/@brandboostinggmbh/shopify-buy-types

Simplest way to use them is via npm i @types/shopify-buy@npm:@brandboostinggmbh/shopify-buy-types

@MurmeltierS I'm using them but I encountered several types that are incorrect.

For instance ShopifyBuy.Cart.discountApplications is typed as string[] but it's actually an object with multiple properties:

Screen Shot 2022-06-14 at 21 21 14

How is the PR for DefinitelyTyped going? Any updates?

I'm happy to contribute if you need help.

@magoz sry, we were a little busy with other things at the moment.
if you encounter any errors feel free to open a pr at https://github.com/Brand-Boosting-GmbH/shopify-buy-types

Hello, just adding to the thread of repeat complaints that the typings are out of date... again.

The latest typings are outdated with the current latest release (2.17.1). The variant interface is my primary pain point as it's no longer using "string" as it's type for price, but using the PriceV2 interface. However, as you can imagine since the ProductVariant interface is being used by other interfaces such as Product and LineItem this kinda a pain in the ass and has lead me to have to extend the ShopifyBuy namespace and start extending interfaces and omitting properties to accommodate for this.

Any ETA on when you'll be releasing an updated version?

@JWizerd Since we moved away from using the "js-buy-sdk" we aren't actively working on our type declerations anymore.
Shopify also seems to have no interest in providing TypeScript Support.

My only suggestion for you would be to use the GraphQL Storefront API directly in combination with graphql-codegen to generate types on the fly.
If you've never used GraphQL before, this might sound a little overwhelming, but I can pretty much guarantee you that that will be a lot more future-proof than this (unloved) package here.