#4480 Convert product grid to consume GraphQL data #4481
Conversation
…rrowed from storefront)
…reaction into feat-dan-graphql-customer-grid-experiment
…b.com/reactioncommerce/reaction into feat-dan-graphql-customer-grid-experiment
|
|
||
| export default function initApollo() { | ||
| return new ApolloClient({ | ||
| link: meteorAccountsLink.concat(new HttpLink({ uri: Meteor.absoluteUrl('graphql-alpha') })), |
There was a problem hiding this comment.
If latest 1.14.0 is merged into this, Meteor.absoluteUrl can be changed to Reaction.absoluteUrl. (Everywhere else in app has been changed.)
| createdAt: -1 | ||
| } | ||
| }); | ||
| // TODO graphql custom tag sort - $sort: { [`product.positions.${tagIdForPosition}.position`]: 1 } |
There was a problem hiding this comment.
We no longer support custom positioning so everything using product.positions can just be removed.
| route: "/tag/:slug?", | ||
| name: "tag", | ||
| template: "products", | ||
| template: "Products", |
There was a problem hiding this comment.
I believe this needs a migration since this goes into the database. See migration 27 for an example
package.json
Outdated
| "@reactioncommerce/random": "1.0.1", | ||
| "@reactioncommerce/schemas": "1.1.0", | ||
| "accounting-js": "^1.1.1", | ||
| "apollo-cache-inmemory": "^1.2.5", |
There was a problem hiding this comment.
All added/changed packages should be pinned (no ^ prefix)
|
@dancastellon This is super exciting! I realize it's WIP but I left a few comments since I'm going to be out the rest of this week. It can be a separate followup PR, but I'd also like to merge the two ProductGrids (the CustomerProductGrid from here and the one in next-starterkit) into a single component that lives in the component library. It would be mostly a copy of the newer starter kit component, but replacing MaterialUI components with our own styled-components divs. cc @machikoyasuda |
…reaction into feat-dan-graphql-customer-grid-experiment
|
@aldeed Thanks! I have made the updates from your comments. |
There was a problem hiding this comment.
@dancastellon I took one more look and noticed a few things.
| } | ||
| }, { bypassCollection2: true }); | ||
| } | ||
| }); |
There was a problem hiding this comment.
These all need to be multi. Change { bypassCollection2: true } to { bypassCollection2: true, multi: true }
| isSoldOut: PropTypes.bool, | ||
| media: PropTypes.arrayOf(PropTypes.object), | ||
| pricing: PropTypes.object, | ||
| pricing: PropTypes.array, |
There was a problem hiding this comment.
Since you are relying on the shape of these, do PropTypes.arrayOf(PropTypes.shape({ ... })) with the correct props inside shape.
|
|
||
| if (loading === false) { | ||
| const { catalogItems } = data; | ||
| props.catalogItems = catalogItems || {}; |
There was a problem hiding this comment.
I think it's best if we pass just the item nodes, i.e., do the map to item.node here before passing down. The wrapped component in almost all cases will not care about edges or cursors. If it ever needs them, we can add an option to provide them.
Also, fetchMore/loadMore should be passed down with pageInfo already bound to it. The wrapped component shouldn't need to know anything about pageInfo, cursors, or pagination. All it knows is that it calls this.props.loadMore when necessary, and you can pass down a hasMoreItems boolean so that it knows whether to display a load more button.
This is the pattern we've tried to use in the starter kit. It's a bit more complicated scenario, but you can see what I mean here: https://github.com/reactioncommerce/reaction-next-starterkit/blob/de613530d6aff10bdf5023d910b5ee07c06e127a/src/containers/cart/withCart.js#L205-L206
…reaction into feat-dan-graphql-customer-grid-experiment
|
Thanks @aldeed, just made the changes. I'm liking the pattern of |
…reaction into feat-dan-graphql-customer-grid-experiment
…m:reactioncommerce/reaction into feat-dan-graphql-customer-grid-experiment
Resolves #4480 and #4486
Impact: major
Type: performance
Changes
This PR adds Apollo Client integration in our Meteor app, and allows the product grid to consume data via GraphQL.
Breaking changes
Shops that have overridden the customer-facing product grid, will break, due to the Meteor publication no longer existing.
Testing
reaction reset -nand start the app upnpx babel-node data/generator.js -m mongodb://localhost:3001 -l dev -n meteor --max_old_space_size=8192 --presets es2015,stage-2to generate data