{"componentChunkName":"component---src-pages-projects-1-brand-co-js","path":"/projects/1brand-co/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Docker Compose Error","description":"docker-compose version discrepancies","slug":"/pensieve/docker-error","date":"2019-12-13","tags":["Docker"],"draft":false},"html":"

Problem

\n

Recently while updating Headless WP with webpack, I encountered a weird error where I wasn't able to run a simple script:

\n
bin/composer
\n
#!/bin/bash\ndocker-compose exec -w /var/www/html/wp-content/themes/skela wordpress composer \"$@\"
\n

When trying to run this script via ./bin/composer install, I got this error in my terminal:

\n
ERROR: Setting workdir for exec is not supported in API < 1.35 (1.30)
\n

The error was coming from the -w flag in the docker-compose exec command in the composer script.

\n

Solution

\n

Turns The fix was to update the version in my docker-compose.yml file to from version 3.5 to 3.6. It's strange because 3.5 isn't anywhere close to the API version 1.35 from the error message 🤷‍

\n
docker-compose.yml
\n
version: '3.6'services:\n  wordpress:\n    build:
"}},{"node":{"frontmatter":{"title":"Markdown Test File","description":"abc234","slug":"/pensieve/markdown-playground","date":"2019-12-07","tags":["Testing"],"draft":false},"html":"

\n \n \n \n \n

\n
class FlavorForm extends React.Component {  constructor(props) {\n    super(props);\n    this.state = {value: 'coconut'};\n\n    this.handleChange = this.handleChange.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  handleChange(event) {\n    this.setState({value: event.target.value});  }\n\n  handleSubmit(event) {    alert('Your favorite flavor is: ' + this.state.value);    event.preventDefault();  }\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>        <label>\n          Pick your favorite flavor:\n          <select value={this.state.value} onChange={this.handleChange}>            <option value=\"grapefruit\">Grapefruit</option>            <option value=\"lime\">Lime</option>            <option value=\"coconut\">Coconut</option>            <option value=\"mango\">Mango</option>          </select>        </label>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>    );\n  }\n}
\n
highlight.js
\n
// Here is a comment\nfunction $initHighlight(block, cls) {\n  try {\n    if (cls.search(/\\bno\\-highlight\\b/) != -1)\n      return process(block, true, 0x0F) +\n             ` class=\"${cls}\"`;\n  } catch (e) {\n    /* handle exception */\n  }\n  for (var i = 0 / 2; i < classes.length; i++) {\n    if (checkCondition(classes[i]) === undefined) {\n      console.log('undefined');\n    }\n  }\n\n  return (\n    <div>\n      <web-component>{block}</web-component>\n    </div>\n  )\n}\n\nexport $initHighlight;
\n

This is a paragraph.

\n
This is a paragraph.
\n

Header 1

\n

Header 2

\n
Header 1\n========\n\nHeader 2\n--------
\n
@import 'compass/reset';\n\n// variables\n$colorGreen: #008000;\n$colorGreenDark: darken($colorGreen, 10);\n\n@mixin container {\n  max-width: 980px;\n}\n\n// mixins with parameters\n@mixin button($color: green) {\n  @if ($color == green) {\n    background-color: #008000;\n  } @else if ($color == red) {\n    background-color: #b22222;\n  }\n}\n\nbutton {\n  @include button(red);\n}\n\ndiv,\n.navbar,\n#header,\ninput[type='input'] {\n  font-family: 'Helvetica Neue', Arial, sans-serif;\n  width: auto;\n  margin: 0 auto;\n  display: block;\n}\n\n.row-12 > [class*='spans'] {\n  border-left: 1px solid #b5c583;\n}\n\n// nested definitions\nul {\n  width: 100%;\n  padding: {\n    left: 5px;\n    right: 5px;\n  }\n  li {\n    float: left;\n    margin-right: 10px;\n    .home {\n      background: url('http://placehold.it/20') scroll no-repeat 0 0;\n    }\n  }\n}\n\n.banner {\n  @extend .container;\n}\n\na {\n  color: $colorGreen;\n  &:hover {\n    color: $colorGreenDark;\n  }\n  &:visited {\n    color: #c458cb;\n  }\n}\n\n@for $i from 1 through 5 {\n  .span#{$i} {\n    width: 20px * $i;\n  }\n}\n\n@mixin mobile {\n  @media screen and (max-width: 600px) {\n    @content;\n  }\n}
\n
# hello world\n\nyou can write text [with links](http://example.com) inline or [link references][1].\n\n- one _thing_ has *em*phasis\n- two **things** are **bold**\n\n[1]: http://example.com\n\n---\n\n# hello world\n\n<this_is inline=\"xml\"></this_is>\n\n> markdown is so cool\n\n    so are code segments\n\n1. one thing (yeah!)\n2. two thing `i can write code`, and `more` wipee!
\n

Header 1

\n

Header 2

\n

Header 3

\n

Header 4

\n
Header 5
\n
Header 6
\n
# Header 1\n## Header 2\n### Header 3\n#### Header 4\n##### Header 5\n###### Header 6
\n

Header 1

\n

Header 2

\n

Header 3

\n

Header 4

\n
Header 5
\n
Header 6
\n
# Header 1 #\n## Header 2 ##\n### Header 3 ###\n#### Header 4 ####\n##### Header 5 #####\n###### Header 6 ######
\n
\n

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

\n
\n
> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
\n
\n

This is a header

\n
    \n
  1. This is the first list item.
    2. \n
  2. This is the second list item.
    3. \n
\n

Here's some example code:

\n
Markdown.generate();
\n
\n
> ## This is a header.\n> 1. This is the first list item.\n> 2. This is the second list item.\n>\n> Here's some example code:\n>\n>     Markdown.generate();
\n\n
- Red\n- Green\n- Blue\n\n* Red\n* Green\n* Blue\n\n- Red\n- Green\n- Blue
\n
    \n
  1. Buy flour and salt
    2. \n
  2. Mix together with water
    3. \n
  3. Bake
    4. \n
\n
1. Buy flour and salt\n1. Mix together with water\n1. Bake
\n

Paragraph:

\n
Code
\n\n
Paragraph:\n\n    Code
\n
\n
\n
\n
\n
\n
* * *\n\n***\n\n*****\n\n- - -\n\n---------------------------------------
\n

This is an example link.

\n

This link has no title attr.

\n

This is an example reference-style link.

\n
This is [an example](http://example.com "Example") link.\n\n[This link](http://example.com) has no title attr.\n\nThis is [an example] [id] reference-style link.\n\n[id]: http://example.com "Optional Title"
\n

single asterisks

\n

single underscores

\n

double asterisks

\n

double underscores

\n
*single asterisks*\n\n_single underscores_\n\n**double asterisks**\n\n__double underscores__
\n

This paragraph has some code in it.

\n
This paragraph has some `code` in it.
"}},{"node":{"frontmatter":{"title":"WordPress Publishing Error","description":"Trying to create a simple post in WordPress","slug":"/pensieve/wordpress-publish-error","date":"2019-12-03","tags":["WordPress"],"draft":false},"html":"

Problem

\n

Recently while working on a WordPress project with Ups Dock, I encountered a weird error where I wasn't able to update or publish a simple post in my local WP admin.

\n

It looked something like this:

\n

\n \n \n \n \n

\n

Sometimes the error message would be slightly more helpful: Publishing failed. Error message: The response is not a valid JSON response.

\n

\n \n \n \n \n

\n

And if I popped open the console, I saw these errors:

\n

\n \n \n \n \n

\n

Solution

\n

Since the error message had to do with a JSON response, I initially thought it was a Gutenberg or ACF issue. But it turned out this was happening because I was on the https WP admin (i.e. https://project.ups.dock/wp-admin), not the unsecure WP admin (http://project.ups.dock/wp-admin).

\n

It was a CORS error!! I was trying to modify a non-https domain from a https domain. Switching to a non-https WP admin allowed me to publish posts with no problem.

"}},{"node":{"frontmatter":{"title":"Apollo getCacheKey() with TypeScript","description":"DEVELOPMENT","slug":"/pensieve/apollo-getcachkey-with-typescript","date":"2019-11-9","tags":["Apollo","React"],"draft":false},"html":"

Problem

\n

I’m currently working on the front end of an app that uses React + Apollo (via apollo-boost) + TypeScript. I’m to the point where I’m retrieving items from the cache in my resolvers using fragments1, which means I need to use getCacheKey() to search for the item's cache key using its ID field. (In this app, it would probably work to just assume the cache key is TypeName:UUID, but you never know, so we should probably do things properly.)

\n

Unfortunately, I have not been able to find the correct typings for getCacheKey(). When passing in cache as an argument to a resolver, one can import NormalizedCacheObject for the typings, like so:

\n
import { ApolloCache } from 'apollo-cache'\nimport { NormalizedCacheObject } from 'apollo-boost'\n\n...\n\nMutation: {\n  resolveSomeStuff: (\n    _: undefined,\n    { itemId, itemOptions }: { itemId: string; itemOptions: Array<string> },\n    { cache }: { cache: ApolloCache<NormalizedCacheObject> }  ) => {\n  /* Now we resolve everything. Global warming, world\n  hunger, over- and under-population.... */\n  ...\n  }\n}
\n

Inside my resolver, the Apollo docs tell me to get an item's cacheKey like this:

\n
const cacheKey = cache.getCacheKey({ __typename: 'Item', id: itemId });
\n

Unfortunately, if I use this formulation, tslint will yell at me:

\n
ERROR: \"Property 'getCacheKey' does not exist on type 'ApolloCache'.\"
\n

Solution

\n

Half an hour of Googling was unhelpful. But eventually I found someone reporting a similar-sounding problem as an issue over at the apollo devtools repo. I adopted his workaround, and it was effective for me. So here is the code inside my resolver:

\n
const cacheKey = cache['config'].dataIdFromObject({\n  __typename: 'Item',\n  id: itemId,\n});
\n
\n

This essentially does an end run around the problem by not calling getCacheKey() at all. I don't know enough about the inner workings of the Apollo client to understand why this works, but I kind of don't care.

\n
\n

If you don’t know what some or all of that means, this post probably isn’t for you.

"}}]}},"pageContext":{}}}