-
Notifications
You must be signed in to change notification settings - Fork 328
Suggestion: use Redux for cart state in react-apollo example #24
Comments
Actually to be more precise, the checkout state is already stored in the Redux store, but then it's also stored as state on the |
Fetching from the store directly sounds like an improvement 👍. A PR would be welcome if you want to do it :) |
Looking at the code, it seems like the checkout data is obtained through a In other words, make |
I'm not too familiar with React design patters and HoC's but
does sound like a good goal. I think right now these examples automatically create a checkout on first visit. This was a decision to simplify things but it might be possible to delay that as well until it's needed. |
Yeah I was wondering what the idea behind that was. Is it so that checkouts can be saved server-side and reloaded later? Do "normal" Shopify sites always initialize checkout objects right from the start? I also saw there were some hard-coded values in there (e.g. |
Yeah so when a return visit happens, the checkout can be retrieved from local storage or whatever. But it still doesn't need to happen automatically on first visit. I personally think it should be deferred from "on load" to "on add item". This does kind of mirror what Shopify's Online Store does, but it's a different concept and I can't think of a good reason to just copy it.
I think that was required before our API was launched. It should definitely be removed. An "empty" checkout can be created. |
I think I'm not going to touch the checkout code for now then, I'll let you change it to what you have in mind before I refactor anything. I can always find other things to do :) |
One more note, I think |
That's weird to me 🤔
Any references about this? Most of what I've ever read about mutations is using them for operations that cause a write on the backend which is obviously the case with |
Yeah sorry, I didn't really explained what I meant very well. Basically this is how I see it. We have two possible situations:
Use case (1) is a query, while (2) is a mutation. But in Apollo, query containers pass their result as a child prop, while mutations pass their results as the results of a promise. So I'm not entirely sure what's the best way to handle both use cases in the same place (like a single |
I think this is a bit interesting because most GraphQL clients right now assume that the result from a mutation isn't that interesting. Apollo Client, Relay, etc allow you to update some existing data in the cache via the mutation result, but don't treat that result the same way as the result from a query. There are a few ways I might go about this:
There's one thing you can't get around: The checkout object is a per-session value. So it can't really be a query since there can be multiple checkouts per user (I assume). So in any case you need to store that ID somewhere in local storage, or redux, or local state, or whatever. The only question is how do you get the rest of the data. I'm partial to 3 because it means you can use a query to get the data, while still using the mutation result at first to avoid two requests. |
OK @SachaG showed me the query: query checkoutQuery($id: ID!) {
node(id:$id) {
id
... on Checkout{
...CheckoutFragment
}
}
} So you could define a custom resolver for |
That sounds good to me 👍 Checkouts are handled in a generic way in our schema (like they are any other resource) so any client specific behaviour should be done on the client. |
Oh, speaking of this: what was the reasoning behind having a single |
That's just part of the Relay spec which is pretty standard now. We did have those query fields at one point but just felt it was duplicative. No plans to add them back as of yet. |
@SachaG, I think a |
Yes, I agree. I actually started working on this but had to pause the project. Hoping to restart soon following @stubailo's advice. |
OK, I made some progress: https://github.com/ReactifyJS/Reactify I haven't yet done the custom resolver thing, so right now I'm in scenario 1 in @stubailo's post. |
I'd be interested to know if there's been any more progress. Obviously Apollo has moved away from Redux but @stubailo's 3rd scenario still seems like a good goal to avoid duplicating state. In particular I'd be interested in options to query Apollo for a |
Since Apollo already uses Redux to store products, I think it'd be a natural fit to also use it to manage the shopping cart's state.
Or would it be better to create a new react-apollo-redux example?
The text was updated successfully, but these errors were encountered: