diff --git a/README.md b/README.md
index 4761115..b88f787 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ The React web application is using [NextJS](https://nextjs.org/), [GraphQL Codeg
## INSTALL
1. `yarn`
-2. `bash setup.sh` sets correct local .env file with _mock mode as default_ (possible to set your bol.com api key there as well (then set MOCK_API=OFF), the only difference will be using a real datasource or not)
+2. `bash setup.sh` sets correct local .env file with _mock mode as default_ (possible to set your bol.com api key there as well (then set MOCK_API=off), the only difference will be using a real datasource or not)
3. Apollo [vsc extension](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo) (optional)
## STRUCTURE
@@ -26,7 +26,7 @@ The React web application is using [NextJS](https://nextjs.org/), [GraphQL Codeg
**Now when you followed the install part (and looked at point 2) you can simply run `yarn start`. It will spin up the GraphQL server and the React application.**
Please look at the VSC plugins below for editor happiness.
-It is also possible to just play with only the server part with `MOCK_API=ON yarn start:dev:server`, which spins up the graphql server in mocked mode.
+It is also possible to just play with only the server part with `MOCK_API=on yarn start:dev:server`, which spins up the graphql server in mocked mode.
Or `BOL_API_KEY=*** yarn start:dev:server` which spins it up in non mocked mode when you have an open api bol.com key.
## PLAYGROUND
@@ -64,12 +64,12 @@ Environment vars for development (set them in CI for production).
### '.env' file inside './packages/server':
-*Important: You can set MOCK_API to ON in case you don't have access to bol.com api. Then the server will use stub data*
+*Important: You can set MOCK_API to 'on' in case you don't have access to bol.com api. Then the server will use stub data*
```
BOL_API_KEY=***
NODE_ENV=development
-MOCK_API=ON|OFF
+MOCK_API=on|off
ENGINE_KEY=optional-apollo-engine-key-overhere REMOVE WHEN NOT AVAILABLE
ALLOWED_ORIGIN=optional-not-needed-dev-mode REMOVE
```
diff --git a/dev.sh b/dev.sh
index 0125c43..1de4b32 100644
--- a/dev.sh
+++ b/dev.sh
@@ -1,5 +1,5 @@
./node_modules/.bin/concurrently --names "REACT, REACT-COMPONENTS, GRAPHQL, GRAPHQL-TYPES" \
- -c "bgBlue.bold,bgGreen,bgMagenta.bold,bgGreen" \
+ -c "blue.bold,gray,cyan.bold,gray" \
"cd packages/app && yarn dev" \
"cd packages/app && yarn generate:graphqlcodegen -w" \
"cd packages/server && yarn dev" \
diff --git a/package.json b/package.json
index 0d282f7..d766984 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,14 @@
"scripts": {
"postinstall": "lerna exec -- yarn install && lerna run prepare",
"audit": "lerna run audit",
- "start": "./node_modules/.bin/concurrently --names 'REACT, react-autogen, GRAPHQL, graphql-autogen' -c 'blue.bold,gray,cyan.bold,gray' 'cd packages/app && yarn dev' 'cd packages/app && yarn generate:graphqlcodegen -w' 'cd packages/server && yarn dev' 'cd packages/server && yarn generate:graphqlcodegen -w'",
+ "start": "./node_modules/.bin/concurrently --names 'REACT, react-autogen, GRAPHQL, graphql-autogen' -c 'blue.bold,gray,cyan.bold,gray' 'NODE_ENV=development yarn workspace graphql-app dev' 'cd packages/app && yarn generate:graphqlcodegen -w' 'NODE_ENV=development yarn workspace graphql-server start' 'cd packages/server && yarn generate:graphqlcodegen -w'",
"dev": "yarn start",
"build": "lerna run build",
"lint": "lerna run lint",
"test": "lerna run test",
"clean": "find . -name \"node_modules\" -exec rm -rf '{}' + && find . -name \"dist\" -exec rm -rf '{}' +",
"------ playground ------": "----------------------",
- "start:mock-prod": "yarn build && ./node_modules/.bin/concurrently --names 'REACT, GRAPHQL' -c 'blue.bold,cyan.bold' 'NODE_ENV=production cd packages/app && yarn start' 'NODE_ENV=production MOCK_API=ON cd packages/server && yarn start' ",
+ "start:mock-prod": "yarn build && ./node_modules/.bin/concurrently --names 'REACT, GRAPHQL' -c 'blue.bold,cyan.bold' 'NODE_ENV=production cd packages/app && yarn start' 'NODE_ENV=production MOCK_API=on cd packages/server && yarn start' ",
"test:coverage": "lerna run test:coverage",
"outdated": "yarn outdated",
"upgrade": "yarn upgrade-interactive --latest",
diff --git a/packages/app/src/modules/product/elements/product-details/product-details.tsx b/packages/app/src/modules/product/elements/product-details/product-details.tsx
index 3727c9b..d703274 100644
--- a/packages/app/src/modules/product/elements/product-details/product-details.tsx
+++ b/packages/app/src/modules/product/elements/product-details/product-details.tsx
@@ -14,10 +14,11 @@ interface Props {
export const ProductDetails = ({ data, short = false }: Props) => {
const product: ProductFragment = data && data.getProduct;
- const image =
+ const foundImage =
product &&
product.images &&
- product.images.filter((i: any) => i.key === 'L')[0].url;
+ product.images.filter((i: any) => i.key === 'L');
+ const image = foundImage && foundImage.length && foundImage[0].url;
const description = (product && product.shortDescription) || '';
const desc = short ? `${description.substring(0, 720)} ` : description;
@@ -27,7 +28,7 @@ export const ProductDetails = ({ data, short = false }: Props) => {
lang="nl-NL"
data-testid="product-details"
>
-
+ {Boolean(image) && }
{product.title} ({product.rating})
diff --git a/packages/server/README.md b/packages/server/README.md
index b5706b5..12d06ba 100644
--- a/packages/server/README.md
+++ b/packages/server/README.md
@@ -10,7 +10,7 @@
### Development
1. tab 1: `generate:graphqlcodegen -w`
-2. tab 2: `yarn dev` (no mock mode, bol open api key mandetory), or `MOCK_API=ON yarn dev` (mock mode)
+2. tab 2: `yarn dev` (no mock mode, bol open api key mandetory), or `MOCK_API=on yarn dev` (mock mode)
3. open: [http://localhost:4000/graphql](http://localhost:4000/graphql)
### Production
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index c83b413..eaf8071 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -2,9 +2,8 @@ import 'reflect-metadata';
import dotenv from 'dotenv';
if (process.env.NODE_ENV === 'development') {
- dotenv.config({ path: `${__dirname}/../.env` });
+ dotenv.config({ path: `${process.cwd()}/.env` });
}
-
import { bootstrap } from './server';
import { appModule } from './app';
diff --git a/packages/server/src/server.ts b/packages/server/src/server.ts
index d96117e..b25fa4f 100644
--- a/packages/server/src/server.ts
+++ b/packages/server/src/server.ts
@@ -41,7 +41,7 @@ export async function bootstrap(appModule: GraphQLModule) {
engine: {
apiKey: process.env.ENGINE_KEY,
},
- mocks: process.env.NODE_ENV === 'production' ? false : process.env.MOCK_API && process.env.MOCK_API === 'ON' ? MOCKS : false
+ mocks: process.env.NODE_ENV === 'production' ? false : process.env.MOCK_API && process.env.MOCK_API === 'on' ? MOCKS : false
});
const app = express();
@@ -70,7 +70,7 @@ export async function bootstrap(appModule: GraphQLModule) {
() => {
console.log(
`🚀 APOLLO GRAPHQL at http://localhost:${port}${server.graphqlPath}`,
- process.env.MOCK_API && process.env.MOCK_API === "ON" ? "\n✨ Running Apollo server with mocks on" : "",
+ process.env.MOCK_API && process.env.MOCK_API === "on" ? "\n✨ Running Apollo server with mocks on" : "",
);
},
);
diff --git a/setup.sh b/setup.sh
index 0bbe62a..4ad988c 100644
--- a/setup.sh
+++ b/setup.sh
@@ -4,7 +4,7 @@
if [ ! -e ./packages/server/.env ]; then
echo "BOL_API_KEY=
NODE_ENV=development
-MOCK_API=ON" > "./packages/server/.env"
+MOCK_API=on" > "./packages/server/.env"
echo "âš¡ Created a mock .env inside server packages,
- turn mock off by placing your bol open api key and set MOCK_API to OFF"
+ turn mock off by placing your bol open api key and set MOCK_API to off"
fi
\ No newline at end of file