This is the Product Reviews app built with Polaris as an example for the Unite workshop.
git clone [email protected]:Shopify/product-reviews-polaris-example.git
npm install
npm start
This is the Product Reviews app built with Polaris as an example for the Unite workshop.
git clone [email protected]:Shopify/product-reviews-polaris-example.git
npm install
npm start
Can be demonstrated at: https://polaris-product-reviews.glitch.me/ which is now showing this error:
./src/routes/Settings.js
Module build failed: TypeError: The comparison function must be either a function or undefined
at Array.sort (native)
at Array.map (<anonymous>)
at Array.forEach (<anonymous>)
Also seeing the same error on Ubuntu 18.02 when following the Readme instructions, i.e:
git clone [email protected]:Shopify/product-reviews-polaris-example.git
npm install
npm start
I've spent this afternoon trying to configure koa-shopify-auth so that the app can be installed but have not been able to get the auth route to work. I would be interested to see how to integrate koa-shopify-auth within server.js given the usage of koa-router. Tried to combine https://github.com/Shopify/unite-react-node-app-workshop/blob/step5/server/index.js#L23 with the server.js code here but keep running into various errors.
This is what I have so far, again most of it take from https://github.com/Shopify/unite-react-node-app-workshop/blob/step5/server/index.js#L23:
import dotenv from 'dotenv';
import koa from 'koa';
import koaRouter from 'koa-router';
import koaBody from 'koa-bodyparser';
import session from 'koa-session';
import createShopifyAuth, {
createVerifyRequest,
} from '@shopify/koa-shopify-auth';
import {graphqlKoa, graphiqlKoa} from 'apollo-server-koa';
import {makeExecutableSchema} from 'graphql-tools';
dotenv.config();
const {SHOPIFY_API_KEY, SHOPIFY_SECRET} = process.env;
console.log(SHOPIFY_API_KEY);
console.log(SHOPIFY_SECRET);
/* eslint-disable babel/new-cap */
const app = new koa();
app.use(session(app));
app.keys = [SHOPIFY_SECRET];
const router = new koaRouter();
/* eslint-enable babel/new-cap */
const PORT = 3001;
const typeDefs = `
type Product {
name: String
averageRating: Float
reviewCount: Int
}
type Customer {
name: String
email: String
}
type Review {
id: Int!
rating: Int
title: String
content: String
customer: Customer
product: Product
status: String
date: String
}
type Settings {
autoPublish: Boolean
emailNotifications: Boolean
email: String
}
type Query {
reviews: [Review]
review(id: Int!): Review
settings: Settings
}
type Mutation {
updateSettings(autoPublish: Boolean, emailNotifications: Boolean, email: String): Settings
}
`;
const reviews = [
{
id: 341,
title: 'Seriously amazing!',
content:
"No joke, the best hair pomade I have ever used. My hair typically gets a little too wavy and unruly for the hairstyle I have been going with, but the Pomade Paste totally gave me control over my hair. The hold is amazing, plus it keeps a great 'dry-look' to my hair which I like. And lastly, the pomade smells bomb. Seriously it's the best thing you could do for your hair.",
rating: 5,
customer: {
name: 'Mae Jemison',
email: '[email protected]',
},
product: {
name: 'Pomade Paste',
averageRating: 4.4,
reviewCount: 6,
},
status: 'published',
date: 'Mar 18, 6: 21pm',
},
{
id: 256,
title: 'Very nice with a lovely smell',
content:
'The Pomade Cream smells nice and leaves the hair with a nice finish. I have also been using it on my beard and it is doing a great job of keeping it tamed! Strongly recommend the product (N1) and I am looking forward to see what other products Craigmont is going to create.',
rating: 4,
customer: {
name: 'Ellen Ochoa',
email: '[email protected]',
},
product: {
name: 'Pomade Cream',
averageRating: 3.6,
reviewCount: 4,
},
status: 'unpublished',
date: 'Mar 24, 12: 13pm',
},
];
let settings = {
autoPublish: false,
emailNotifications: false,
email: '',
};
const resolvers = {
Query: {
reviews: () => reviews,
review(obj, args) {
return reviews.find((review) => review.id === args.id);
},
settings: () => settings,
},
Mutation: {
updateSettings: (root, args) => {
settings = {
autoPublish: args.autoPublish,
emailNotifications: args.emailNotifications,
email: args.email,
};
},
},
};
export const schema = makeExecutableSchema({
typeDefs,
resolvers,
});
router.post('/graphql', koaBody(), graphqlKoa({schema}));
router.get('/graphql', graphqlKoa({schema}));
router.get('/graphiql', graphiqlKoa({endpointURL: '/graphql'}));
app.use(
createShopifyAuth({
// your shopify app's api key
apiKey: SHOPIFY_API_KEY,
// your shopify app's api secret
secret: SHOPIFY_SECRET,
// our app's permissions
// we need to write products to the user's store
scopes: ['read_orders, read_draft_orders'],
// our own custom logic after authentication has completed
afterAuth(ctx) {
const {shop, accessToken} = ctx.session;
console.log('We did it!', shop, accessToken);
ctx.redirect('/');
},
}),
);
app.use(createVerifyRequest());
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(PORT);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.