Comments (6)
@swalkinshaw and @yoDon If this is still interesting, I created a package that includes all Typescript typings for Shopify Storefront API.
All typings and comments are auto-generated from the GraphQL schema version: 2020-01
.
Contributions are welcome. 😊
https://github.com/caki0915/shopify-storefront-api-typings
https://www.npmjs.com/package/shopify-storefront-api-typings
from storefront-api-examples.
Wow its been 2 years but the quest remains the same, its not easy to find a shopify admin api in typescript
from storefront-api-examples.
Just checking if Shopify has moved towards typescript in the past six months
from storefront-api-examples.
Are you referring to https://github.com/Shopify/storefront-api-examples/blob/master/angular-graphql-client/src/app/shared/services/types.ts?
The Angular example was an external contribution unfortunately. I don't know how the contributor generated it originally. I imagine (and hope) it was automated somehow though!
from storefront-api-examples.
@swalkinshaw the types.ts file you mentioned still just has the GraphQL text descriptors (with types.ts probably hand-made by a contributor from the original types.js file which I'm guessing was procedurally generated by someone at Shopify). These files are soooo close to what is needed for strongly-typed access to the data, but it's just exactly not usable for that today. What we need are either class or interface descriptions like
interface ICheckout {
appliedGiftCards:IAppliedGiftCard;
availableShippingRates:IAvailableShippingRates,
...
where what the types.js/types.ts files contain are string-based lines like
const Checkout = {
"name": "Checkout",
"kind": "OBJECT",
"fieldBaseTypes": {
"appliedGiftCards": "AppliedGiftCard",
"availableShippingRates": "AvailableShippingRates",
...
The content is incredibly close, just some minor grepping and editing to convert. The problem is there is some shopify-generated magic in the types.js/types.ts text that I can't figure out what to do with, for example all of the "OBJECT" type descriptors contain lines like "implementsNode": true
or "implementsNode": false
but I'm not seeing any definition in the file of what implentsNode
means which makes me think this file came from inside Shopify (presumably implementsNode is describing some base class or interface that the individual concrete classes should extend, but I don't know what that base should contain).
Given that GraphQL is at the core a strongly-typed API, and given that you're a tiny, tiny bit of search-and-replace from having your interface fully typed, it would be a huge help to all of us that do use typescript if you folks could do that tiny last step and publish this file as an actual types.d.ts file, since its soooo close to being one already.
from storefront-api-examples.
This is probably something we'd have to automate in another repository. I personally don't have any experience with TS. Are there existing tools to generate the types from a GraphQL API? Seems like something should exist since that's a benefit that a spec like GraphQL provides.
from storefront-api-examples.
Related Issues (20)
- How can we modify checkout weburl
- Query Products within collectionByHandle HOT 1
- React-graphql-client HOT 1
- Modifying Shipping Options (Rates, Description, etc)?
- react-js-buy example: checkout.totalTax and checkout.totalPrice do not exist on type 'Cart' HOT 1
- Unable to query checkout after it's created HOT 1
- Angular 9
- Customer Mutate storefront API limitations
- variantBySelectedOptions field doesn't exist on Product HOT 2
- How to Associate Checkout when click login? HOT 20
- Shopify Storefront API returning an empty products array HOT 2
- Is it secure to store API keys on the customer with unauthenticated_read_customers?
- Unable to Generate Storefront Token HOT 1
- How to get CustomerRecover to work? Getting undefined
- CustomerRecover not returning token it returns only userErrors HOT 1
- how to check valid or expired generated token by customerRecover before customerReset HOT 1
- Payment status callback
- How to clear localstorage/cookies (cart/checkout) on custom front-end?
- shopify returning an error indicated that the cart does not exist however fetching the same cart is successful
- Wrong response body when adding cart item to cart
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storefront-api-examples.