profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/kaumac/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Kaue Miyauti Machado kaumac @Tradeshift Copenhagen, Denmark http://kauemachado.com.br Geek, front-ender, and software engineer at @Tradeshift

gatsbyjs/gatsby 50598

Build blazing fast, modern apps and websites with React

kaumac/eloquentJavascriptPT-BR 1

Projeto de tradução para o português Brasileiro do livro de Marijn Haverbeke

kaumac/formify 1

Fun experiment to create forms on the go

kaumac/awesome_vscode 0

Some changes to make VS Code Awesome

kaumac/create-tradeshift-app 0

Create Tradeshift apps in a few seconds, with - almost - zero configuration and following Tradeshift's development patterns.

kaumac/custom-react-scripts 0

Allow custom config for create-react-app without ejecting

kaumac/eslint-config-standard 0

ESLint Shareable Config for JavaScript Standard Style

kaumac/frontflow 0

A generator for the optimum front-end workflow

issue commentgatsbyjs/gatsby

[gatsby-source-contentful] Provide a code example for rendering rich-text embedded assets images

As of today, I got this code working, but It's not using the latest gatsby-plugin-image import import { renderRichText } from "gatsby-source-contentful/rich-text"

Graphql mainContent { raw references { ... on ContentfulAsset { contentful_id __typename fixed { src } } } }

options const options = { renderNode: { 'embedded-asset-block': node => { console.log(node.data.target) const url = node.data.target.fixed.src return <img src= {url} alt="illustrative image"/> }, }, }

render <article> {blogPost.mainContent && renderRichText(blogPost.mainContent,options)}</article>

slk333

comment created time in 7 minutes

issue openedgatsbyjs/gatsby

[gatsby-source-contentful] Provide a code example for rendering rich-text embedded assets images

Embedding an image in a rich-text field is a common need, yet it's extremely difficult to make it work nicely with the contentful plugin. Information about how to do it are often outdated if not plain wrong.

The current README does not explain how to render an image that comes from a Rich-Text field. The image is an embedded asset. Rendering that image is far from trivial, many developers had to open stackoverflow questions, and the answers are not precise. Moreover, most of the snippets we find through Google are outdated or using the old Gatsby Image.

created time in 31 minutes

issue commentgatsbyjs/gatsby

Twitter Image does not work

@LekoArts Updated with a reproduction.

sashafklein

comment created time in 2 hours

push eventgatsbyjs/gatsby

Vladimir Razuvaev

commit sha 1e63cba4afa86ce9b0f2b8e241cbfddbb25b3e68

wip

view details

push time in 2 hours

push eventgatsbyjs/gatsby

Kyle Mathews

commit sha 4ba8c2cae3eb9ece767e65c549d033ecb78b2d7e

fix(gatsby-plugin-gatsby-cloud): add gatsby-telemetry as a dependency (#32047) * fix(gatsby-plugin-gatsby-cloud): add gatsby-telemetry as a dependency * why yarn.lock why * run git diff to see what is modified * ok * revert * moooer

view details

evank21

commit sha 29211f095b5cf5bbd7205031e460e047367daab4

chore(docs): Fix typo in tutorial (#32050) deleted extra word

view details

Kyle Mathews

commit sha b5f93e908c850555c2904505c84d581a11b02e85

fix(gatsby-source-drupal): Comment out http2-wrapper (#32045) Until we can see if https://github.com/szmarczak/http2-wrapper/issues/73 can get resolved. Fixes https://github.com/gatsbyjs/gatsby/issues/32043

view details

Grayson Hicks

commit sha 6edfc22a99bc7b751715e0ae466bfad644905a6e

chore(examples): Add loadable components (#31954) Co-authored-by: LekoArts <lekoarts@gmail.com>

view details

Grayson Hicks

commit sha 66c7b79a1c07062ff7d609dbec9caa170f372f9a

chore(examples): Fix functions examples + add google oauth (#31953) Co-authored-by: LekoArts <lekoarts@gmail.com>

view details

Grayson Hicks

commit sha 06dfa9c6d8c43299298383404e222294fc8cc6ad

chore(examples): Add two redux examples (#31928) Co-authored-by: LekoArts <lekoarts@gmail.com>

view details

Sam Slotsky

commit sha 069cb535fa5bf5d2eead31533be18b1fe64c2568

Break variants into separate operation (#32027)

view details

Renovate Bot

commit sha daea809bd4eca0c39a26b27228a4a4a2740e7d49

fix(deps): update starters and examples - gatsby

view details

push time in 2 hours

Pull request review commentgatsbyjs/gatsby

Break variants into separate operation

+import { NodeInput } from "gatsby"+import { pattern as idPattern } from "../node-builder"++export function productVariantsProcessor(+  objects: BulkResults,+  builder: NodeBuilder+): Array<Promise<NodeInput>> {+  const objectsToBuild = objects.filter(obj => {+    const [, remoteType] = obj.id.match(idPattern) || []++    return remoteType !== `Product`+  })

Great, that's kind of what I figured the tradeoff would be, thanks for the explanation.

sslotsky

comment created time in 2 hours

PR opened gatsbyjs/gatsby

Proposal to use generators for custom processing

<!-- Have any questions? Check out the contributing docs at https://gatsby.dev/contribute, or ask in this Pull Request and a Gatsby maintainer will be happy to help :) -->

<!-- Is this a blog post? Check out the docs at https://www.gatsbyjs.com/contributing/blog-contributions/, and please mention if the blog post is pre-approved by someone from Gatsby. -->

Description

The logic for processing bulk results tends to lend itself well to generators. The ability to yield items when a condition is encountered can prevent double-looping through .filter(condition).map(transformation) or awkward attempts to use .reduce in order to achieve the same thing with one iteration. It also makes a good replacement for pushing things to an array that will later be returned. This PR contains examples of converting both of these use cases to generators.

<!-- Write a brief description of the changes introduced by this PR -->

Documentation

<!-- Where is this feature or API documented?

  • If docs exist:
    • Update any references, if relevant. This includes Guides and Gatsby Internals docs.
  • If no docs exist:
    • Create a stub for documentation including bullet points for how to use the feature, code snippets (including from happy path tests), etc.
  • Tag @gatsbyjs/documentation for review, pairing, polishing of the documentation -->

Related Issues

<!-- Link to the issue that is fixed by this PR (if there is one) e.g. Fixes #1234

Link to an issue that is partially addressed by this PR (if there are any) e.g. Addresses #1234

Link to related issues (if there are any) e.g. Related to #1234 -->

+53 -26

0 comment

4 changed files

pr created time in 3 hours

create barnchgatsbyjs/gatsby

branch : sslotsky/use-generators-for-custom-processing

created branch time in 3 hours

push eventgatsbyjs/gatsby

Sam Slotsky

commit sha 069cb535fa5bf5d2eead31533be18b1fe64c2568

Break variants into separate operation (#32027)

view details

push time in 3 hours

delete branch gatsbyjs/gatsby

delete branch : sslotsky/ch32892

delete time in 3 hours

PR merged gatsbyjs/gatsby

Break variants into separate operation status: triage needed

<!-- Have any questions? Check out the contributing docs at https://gatsby.dev/contribute, or ask in this Pull Request and a Gatsby maintainer will be happy to help :) -->

<!-- Is this a blog post? Check out the docs at https://www.gatsbyjs.com/contributing/blog-contributions/, and please mention if the blog post is pre-approved by someone from Gatsby. -->

Description

Breaking product variants into a separate operation so that presentment prices can be added.

Shopify's bulk API has a limit on the number of connections that can be requested in a single query, so in order to support presentmentPrices requested by community members, we need to pull variants out into a separate operation.

<!-- Write a brief description of the changes introduced by this PR -->

Documentation

<!-- Where is this feature or API documented?

  • If docs exist:
    • Update any references, if relevant. This includes Guides and Gatsby Internals docs.
  • If no docs exist:
    • Create a stub for documentation including bullet points for how to use the feature, code snippets (including from happy path tests), etc.
  • Tag @gatsbyjs/documentation for review, pairing, polishing of the documentation -->

Related Issues

https://app.clubhouse.io/gatsbyjs/story/32892/move-product-variants-into-a-separate-operation https://github.com/gatsbyjs/gatsby-source-shopify/issues/161

<!-- Link to the issue that is fixed by this PR (if there is one) e.g. Fixes #1234

Link to an issue that is partially addressed by this PR (if there are any) e.g. Addresses #1234

Link to related issues (if there are any) e.g. Related to #1234 -->

+198 -90

1 comment

11 changed files

sslotsky

pr closed time in 3 hours

Pull request review commentgatsbyjs/gatsby

Break variants into separate operation

+import { NodeInput } from "gatsby"+import { pattern as idPattern } from "../node-builder"++export function productVariantsProcessor(+  objects: BulkResults,+  builder: NodeBuilder+): Array<Promise<NodeInput>> {+  const objectsToBuild = objects.filter(obj => {+    const [, remoteType] = obj.id.match(idPattern) || []++    return remoteType !== `Product`+  })

No and yes.

We can query for variants at the top level, but I found that it didn't work quite right for incremental builds. It seems that when you add a variant, querying for products that are updated_at >= last_build_time pulls them back, but when you query for variants there's no created_at filter, and updated_at >= last_build_time doesn't pull it back.

So because of that, I wrapped our new variants query in a products query that takes the same filters as the products query does, and now we get back all the correct records. But as a result, we get all these Product records in the results that we don't need because we already created nodes for them.

I suspect that merging this PR might mean that cold builds are a little bit slower. Hopefully not much. But without doing this, we won't be able to add presentmentPrices without removing something else, so I think we have to.

sslotsky

comment created time in 3 hours

Pull request review commentgatsbyjs/gatsby

Break variants into separate operation

+import { NodeInput } from "gatsby"+import { pattern as idPattern } from "../node-builder"++export function productVariantsProcessor(+  objects: BulkResults,+  builder: NodeBuilder+): Array<Promise<NodeInput>> {+  const objectsToBuild = objects.filter(obj => {+    const [, remoteType] = obj.id.match(idPattern) || []++    return remoteType !== `Product`+  })

Do we have to check if it's not a Product because we can't query for product variants directly and the new Productvariant query query's for products and product variants?

sslotsky

comment created time in 3 hours

pull request commentgatsbyjs/gatsby

fix(gatsby-plugin-offline): Upgrade workbox to v6

@Jangam I'd have too look deeper into the issue you mentioned to comment on if it is solved or improved with this PR or not. I primarely focused on upgrading to the latest workbox version while preserving as much of the behaviour and functionality of the existing gatsby-plugin-offline as possible (with the exeption of also solving/improving the issues mentioned here: https://github.com/gatsbyjs/gatsby/issues/28289) in this PR.

However, a year ago I also tried to implement the offline page functionality you described in a project of mine, and also didn't get reliable/satisfactory results. If I remember correctly I had a diffrent approach than the one you linked, but I don't exactly remember the details. In any case, I agree that this would be a nice feature, and to be honnest I think many user would even expect that feature out of the box from this plugin.

I'll look into this, and see how one could implement this, and if we could add this feature within this PR or if, IMHO, it makes sense to add this feature via a seperate issue/PR after this PR has been accepted

kije

comment created time in 3 hours

issue closedgatsbyjs/gatsby

Support for ProductCollectionSortKeys and ProductImageSortKeys

Adding support for ProductCollectionSortKeys and ProductImageSortKeys would be welcome additions.

ProductCollectionSortKeys

You can imagine a situation where filtering collections of products on the frontend becomes much more feasible using ProductCollectionSortKeys (mentioned in gatsbyjs/gatsby-source-shopify#112).

ProductImageSortKeys

In (limited) testing it seems that Shopify's Admin API returns product images out of their natural order, whereas the Storefront API returns them in their natural order, based on how the product's images are positioned in the Shopify Admin UI.

Implementing ProductImageSortKeys would allow for proper ordering when using the Admin API, though I think defaulting to the POSITION value would be sufficient?

Example queries:

ProductCollectionSortKeys

query {
  collectionByHandle(handle: "classic"){
    products(first: 10, sortKey: BEST_SELLING) {
      ...
    }
  }
}
ProductImageSortKeys

query {
  productByHandle(handle: "snare-boot") {
    images(sortKey: POSITION) {
      ...
    }
  }
}

closed time in 4 hours

jc745

issue closedgatsbyjs/gatsby

Sales Channels & Apps Restrictions?

Previously, only products marked for inclusion in a particular Sales Channel or App was included in the products returned from the shopify api. However, now I'm getting all of the products in the store regardless of whether they're meant to be included in the App that I've used to set up the API key. Is there a way to exclude those products from the results returned?

closed time in 4 hours

bahamagician

issue closedgatsbyjs/gatsby

No SEO fields?

Hi may I know how to get the SEO fields? thanks image

closed time in 4 hours

rayjencode

issue closedgatsbyjs/gatsby

Multi-lingual sourcing

First things first: Thanks for the renewed Shopify source plugin.

Since you are now using Shopify’s Bulk Operations API, I wonder if there will be support for different languages as there is for quite some time in the Storefront API with the translation header?

From GatsbyConf 2021, I learned there will be multi-lingual support. Is there any timeline worth sharing or ready to do so? Any proof-of-concept to get an idea of how you will integrate this very important feature. More and more e-commerce sites are at least bi-lingual.

All the best, Marco

closed time in 4 hours

m99coder

issue closedgatsbyjs/gatsby

Version 4 to 5 migration

I thought it would be good to have a place where people can share their experiences and useful information while testing out V5 release candidates.

closed time in 4 hours

wildpow

issue closedgatsbyjs/gatsby

Fetch draft product

Actually plugin only fetch active product.

It can be very useful to be able to fetch also draft products if wanted.

closed time in 4 hours

vlefort

issue closedgatsbyjs/gatsby

Non product and collection metafields?

Is there already, or will there at some point be access to all types of metafields? For example, I use an app called Custom Fields by Bonify and they offer a global metafield section. I like it because it allows for arrays of product or metafield references (JSON stringified array of handles) which are really simple for the client.

Searching through allShopifyMetafieldInterface, I don't see the global metafields I've created, so am just wondering if they are limited to products and collections for now.

As a use-case, I think globals would be really nice for certain types of site configuration with headless shops.

Cheers!

closed time in 4 hours

dungle-scrubs

issue closedgatsbyjs/gatsby

Not seeing presentmentPrices?

I'm looking to get the presentmentPrices (which are the variant prices set to multiple countries/regions).

I can't see this being available in the source when using it in a gatsby-shopify-starter test project:

image

I don't think this is to do with shopify settings, because you can get the presentmentPrices via the shopify-buy sdk — so it appears as though the node is not resolving properly when being included as a gatsby plugin.

I can see this is included in gatsby-source-shopify/src/queries.js when looking at it in node_modules

const PRODUCTS_QUERY = `
  query GetProducts($first: Int!, $after: String) {
    products(first: $first, after: $after) {
      pageInfo {
        hasNextPage
      }
      edges {
        cursor
        node {
          # everything else...
          variants(first: 250) {
            edges {
              node {
                # everything else...
                presentmentPrices(first: 250) {
                  edges {
                    node {
                      price {
                        amount
                        currencyCode
                      }
                      compareAtPrice {
                        amount
                        currencyCode
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;

But I cannot see presentmentPrices in the source code: https://github.com/gatsbyjs/gatsby-source-shopify/blob/master/plugin/src/query-builders/products-query.ts

Thanks for reading!

closed time in 4 hours

moreguppy

issue closedgatsbyjs/gatsby

Are discounts available?

It seems like I can find anything else I need, but I don't see any references to discounts

closed time in 4 hours

dim-stef

issue closedgatsbyjs/gatsby

No priceV2 on variants

Hey guys!

It seems that there is no priceV2 data point on variants, only price (which doesn't include currencyCode). It looks like there is priceRangeV2 on products, but not priceV2 on variants. Screen Shot 2021-06-19 at 14 46 45

closed time in 4 hours

chrisvince

issue closedgatsbyjs/gatsby

Sort products for a collection

Hi,

Is it possible to sort products using allShopifyProduct and that's good.

But when fetching a specific collection using shopifyCollection it's not possible get products of collection sorted with sort a filter.

closed time in 4 hours

vlefort

issue closedgatsbyjs/gatsby

Cannot use svg-url-loader for svg files using the onCreateWebpackConfig api

I am trying to use 'svg-url-loader' instead of 'url-loader' for svg files. I have installed it, and it works with webpack-inline-loaders. But If I do that, I'll have to use webpack-inline-loader every time I import them. So, I decided to use the onCreateWebpackConfig API to change the loader for svg files. I added the below code in gatsby-node.js. But the website is now not even displaying any image but alt text. But the src attribute of the img tag is using a faulty base64 encoded image and not the utf8 encoded svg xml tag.

exports.onCreateWebpackConfig = ({ stage, getConfig, rules, loaders, plugins, actions, }) => { actions.setWebpackConfig({ module: { rules: [ { test: /\.svg/, use: { loader: "svg-url-loader", options: { limit: 4096, iesafe: true, }, }, }, ], }, }); };

The console is not displaying any errors. I have created a local plugin at the /plugins dir, but it doesn't work also. I am developing my site on my local machine and building it using Gatsby Cloud. The problems persist in both places. Any help will be appreciated. Thank you.

Here's the link to the minimal repro.

Environment

System: OS: Windows 10 10.0.19042 CPU: (4) x64 Intel(R) Core(TM) i3-5010U CPU @ 2.10GHz Binaries: Node: 15.11.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 7.6.0 - C:\Program Files\nodejs\npm.CMD Languages: Python: 2.7.15 - C:\Users\Mariam-Rafid\.windows-build-tools\python27\python.EXE Browsers: Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.54) npmPackages: gatsby: ^3.5.1 => 3.7.2 gatsby-background-image: ^1.5.3 => 1.5.3 gatsby-plugin-canonical-urls: ^3.7.1 => 3.7.1 gatsby-plugin-catch-links: ^3.6.0 => 3.7.1 gatsby-plugin-csp: ^1.1.3 => 1.1.3 gatsby-plugin-feed: ^3.6.0 => 3.7.1 gatsby-plugin-gatsby-cloud: ^2.4.1 => 2.7.1 gatsby-plugin-image: ^1.3.0 => 1.7.1 gatsby-plugin-manifest: ^3.3.0 => 3.7.1 gatsby-plugin-mdx: ^2.5.1 => 2.7.1 gatsby-plugin-nprogress: ^3.6.0 => 3.7.1 gatsby-plugin-offline: ^4.5.1 => 4.7.1 gatsby-plugin-postcss: ^4.3.0 => 4.7.1 gatsby-plugin-preact: ^5.4.0 => 5.7.1 gatsby-plugin-purgecss: ^6.0.1 => 6.0.2 gatsby-plugin-react-helmet-async: ^1.2.0 => 1.2.0 gatsby-plugin-robots-txt: ^1.6.2 => 1.6.2 gatsby-plugin-sass: ^4.3.0 => 4.7.1 gatsby-plugin-sharp: ^3.3.0 => 3.7.1 gatsby-plugin-sitemap: ^4.1.0 => 4.3.1 gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.22 => 1.1.22 gatsby-remark-autolink-headers: ^4.2.0 => 4.4.1 gatsby-remark-embed-snippet: ^6.2.0 => 6.4.1 gatsby-remark-images: ^5.2.1 => 5.4.1 gatsby-remark-prismjs: ^5.2.1 => 5.4.1 gatsby-remark-smartypants: ^4.2.0 => 4.4.1 gatsby-source-contentful: ^5.5.0 => 5.7.1 gatsby-source-filesystem: ^3.3.0 => 3.7.1 gatsby-transformer-json: ^3.6.0 => 3.7.1 gatsby-transformer-remark: ^4.0.0 => 4.4.1 gatsby-transformer-sharp: ^3.3.0 => 3.7.1

flags in gatsby-config.js

PRESERVE_WEBPACK_CACHE: true, PRESERVE_FILE_DOWNLOAD_CACHE: true, FAST_DEV: true, PARALLEL_SOURCING: true, LMDB_STORE: true,

closed time in 4 hours

RafidMuhymin

issue closedgatsbyjs/gatsby

[Question] - Ability for GatsbyJS to send Auth headers to WordPress GraphQL endpoint?

We have a scenario where our WordPress website is hosted in Azure as an App Service, and the business requires it to be locked down using the built in Authentication approach. This will mean users can only view the website with their AD credentials.

Once they log in with their AD details, they can view the website.

This causes issues for our pipeline which is hosted in Azure DevOps where in the build task it will query /graphql endpoint specified, but it won't reach it as it gets a 401 Unauthorised access.

Is there a way either in gatsbyjs, or pipeline to pass authorisation headers perhaps - unless there is a better way of doing this?

Thanks!

closed time in 4 hours

rforster-dev

create barnchgatsbyjs/gatsby

branch : sslotsky/generator-proposal

created branch time in 4 hours

pull request commentgatsbyjs/gatsby

fix(gatsby-plugin-offline): Upgrade workbox to v6

@kije could you please confirm if below mentioned problem is solved with this release

reference 1 : https://stackoverflow.com/a/67377906 reference 2 : https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v5#precachefallback_in_runtime_caching

problem with current version offline plugin: I have setup PWA with my site. if user gets disconnected from internet while browsing the site, he can still browse the pages which are cached. but if user gets disconnected and then he clicks on any link whose underline page is not cached yet. the page throws error " This site can’t be reached The webpage at https://mydemosite.gatsbyjs.io/about might be temporarily down or it may have moved permanently to a new web address. ERR_FAILED "

I wanted to setup the offline page functionality to overcome this error page. so when user tries to browse the page which is not cached yet he can at least see offline page. I found two above resources to achieve this. I implemented this but still results weren't as expected so when I dig further and I found that current offline plugin is based on workbox v4.3.1 so this cannot be implemented out of the box. so for the time being I have commented out the code and added reference to this PR to keep track on this.

I am hoping we can implement offline.html page functionality with above two references with this PR . Please confirm. also if there is any alternate ways to implement offline.html page add them in release notes too. this will be nice feature to have

Thank you in advance

kije

comment created time in 4 hours

issue openedgatsbyjs/gatsby

[Question] - Ability for GatsbyJS to send Auth headers to WordPress GraphQL endpoint?

We have a scenario where our WordPress website is hosted in Azure as an App Service, and the business requires it to be locked down using the built in Authentication approach. This will mean users can only view the website with their AD credentials.

Once they log in with their AD details, they can view the website.

This causes issues for our pipeline which is hosted in Azure DevOps where in the build task it will query /graphql endpoint specified, but it won't reach it as it gets a 401 Unauthorised access.

Is there a way either in gatsbyjs, or pipeline to pass authorisation headers perhaps - unless there is a better way of doing this?

Thanks!

created time in 5 hours