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.
https://shopify.github.io/js-buy-sdk
MIT License
984 stars 259 forks source link

Update Type Decleartions(?) #883

Open MurmeltierS opened 2 years ago

MurmeltierS commented 2 years ago

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

fmoessle commented 2 years ago

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 :)

MurmeltierS commented 2 years ago

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

janbaykara commented 2 years ago

big if true

MurmeltierS commented 2 years ago

@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

janbaykara commented 2 years ago

Thanks very much @MurmeltierS!

MurmeltierS commented 2 years ago

Thanks very much @MurmeltierS!

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

sharathnraj commented 2 years ago

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.

MurmeltierS commented 2 years ago

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

fmoessle commented 2 years ago

Dear Shopify developers,

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

pfych commented 2 years ago

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.

dilloncoffman commented 2 years ago

Thank you @einzN!

Thanks very much @MurmeltierS!

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

magoz commented 2 years ago

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.

MurmeltierS commented 2 years ago

@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

JWizerd commented 1 year ago

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?

MurmeltierS commented 1 year ago

@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.

Nikola-Milovic commented 1 month ago

Brand boostings types are outdated, and the definitely typed seems to be outdated as well now. What are you guys using if anything for the types? Seems absurd that this is still an issue