QUESTION: data attributes in markup

[jasonbahl]

Hey!

I notice in the contentParser it looks like it's looking for particular data attributes that I don't recognize.

For example here:

gatsby-wpgraphql-inline-images/src/contentParser.js

Line 80 in b423abe

getByPath(domNode, 'attribs[data-gts-encfluid]', null);

It's looking for elements with: attribs[data-gts-swapped-href]

Is there a WordPress plugin that is affecting image markup as well? Or what's going on with these custom attributes.

Just curious if there's anything needed on the WordPress side to work with this.

Thanks!

[progital]

Hi!

It's a workaround for some issues I've encountered with Gatsby. I wanted to get it working even using some hacky ways and then ask someone more knowledgeable about it. Maybe I was doing queries wrong :)

When using your blog starter there is only one place where we query for the content e.g. https://github.com/wp-graphql/gatsby-wpgraphql-blog-example/blob/master/src/templates/page.js. When I wanted to query for imageSharp nodes I added them to the same query (actually I've tried several ways of doing it with the same result). It turned out that it worked in develop mode because nodes were auto-updating but it failed in a production build. My understanding of it

• new imageSharp nodes are created in a resolver (my plugin does that)
• however the whole query is processed before those nodes are created
• as a result these new nodes are not queried for

So I implemented a workaround by simply passing the fluid object in data-gts-encfluid attribute.

The data-gts-swapped-href attribute is another workaround for a totally different case. In sourceParser.js absolute links to wordpress hosted files are replaced with links to locally downloaded files. I don't want these links to be processed again in contentParser.js so this attribute is just a flag meaning ignore this link. Not a great solution I know.

There is another hacky solution for the featured image that I pushed yesterday.