DEV Community: nop33

How to Combine TanStack Query Data in React

nop33 — Sat, 01 Aug 2026 00:00:00 +0000

Who this is for. You already use TanStack Query and are comfortable with useQuery and query keys. If you are not there yet, read TkDodo’s React Query series first. It is the best writing there is on this library, and everything below assumes it.

One common TanStack Query pattern is that you can create your own wrapper hooks around the primitive hooks the library provides, especially if you want to reuse them across several components or other hooks, or just want to keep your components’ code clean:

// src/components/Asset.tsx
const Asset = ({ assetId }) => {
  const { data } = useAssetPrice(assetId)

  return (/* ... */)
}

// src/api/queries.ts
const useAssetPrice = (assetId) => useQuery(priceQuery(assetId))

const priceQuery = (assetId) =>
  queryOptions({
    queryKey: ['prices'],
    queryFn: () => fetchPrices(),
    select: (prices) => prices[assetId]
  })

TkDodo recommends exactly this in Practical React Query, and it is good advice. The query key and the fetcher live in one place. The component doesn’t need to know how the data arrives, it just uses the data it needs.

An interesting question then is: What goes inside these wrapper hooks?

For an example like the one above where the data the component needs comes directly from a single API endpoint, the answer is simple: just the useQuery call. But what if the shape of the data the component needs has to be derived by combining data from multiple API endpoints?

To illustrate what I mean: Take the example of a portfolio app that supports multiple accounts and displays the total value. You create usePortfolioValue().

The endpoints you have available for deriving the value are:

// get assets list of 1 account
GET /accounts/:id/assets -> [{ assetId, amount }]

// get prices of all assets from an external market-data service
GET /prices -> { assetId: price }

How would you do it?

A detailed catalogue of options for transforming data already exists. Combining is a different problem, and only partially addressed online. If your backend can do the JOIN for you, take it. But if it can’t, keep reading.

You will see this called different things depending on where you read about it. Derived queries. Query composition. Combining queries. Same question.

In this article I am exploring different ways the community and myself have thought of to solve this problem, each with its own trade-offs.

Spoiler alert: There is no one best solution, but a solution listed here might help you in your particular situation.

The problem

Back to the portfolio example. The user connects several accounts, let’s say 3 accounts:

stocks account
precious metals account
crypto account

Each account holds several assets. The overview page looks something like this:

Total value
$48,150.00                                 

Asset Allocation % Value
───────────────────────────────────────────
AAPL ██████░░░░░░░░░░░░░░ 32% $15,408
VWRL █████░░░░░░░░░░░░░░░ 24% $11,556
BTC  ████░░░░░░░░░░░░░░░░ 18% $8,667
MSFT ███░░░░░░░░░░░░░░░░░ 16% $7,704
GOLD ██░░░░░░░░░░░░░░░░░░ 10% $4,815
───────────────────────────────────────────
                              100% $48,150

Given the 2 available GET endpoints mentioned above, let’s try to derive the total portfolio value.

1. Combine in the component

The most obvious one is to combine the data in the render function of the component, the body of our wrapper hook, by calling useQuery/useQueries for each piece of data and stitching them together:

const usePortfolioValue = () => {
  const accountIds = useAccountIds()

  const { data: prices } = useQuery(pricesQuery())
  const { data: assets } = useQueries({
    queries: accountIds.map(assetsQuery),
    combine: mergeAssets
  })

  return useMemo(() => 
    reduceTotalValue(assets, prices),
    [assets, prices]
  )
}

// module scope, so the reference stays stable
const mergeAssets = (assetsPerAccounts) => 
  assetsPerAccounts.flatMap((account) => account.data ?? [])

🤔 Aside
You might object and say “Hey, you are also combining in useQueries, you’re not just combining them in the useMemo() call”. And you would be right. This is extremely necessary.

First of all, why useQueries? Because the number of accounts is not known ahead of time, and you can’t use useQuery in a loop. Secondly, without combine the results the useQueries call spits out will be a freshly built array. On every render. This means the useMemo() deps would change every time. Your reduceTotalValue() function then runs on every render, defeating the point of using useMemo(). So, use combine when using useQueries.

This is a totally valid approach. It is important, however, to understand what happens under the hood. Let’s do some arithmetic. Our usePortfolioValue() hook will create several Observers once it’s called, one for each Query. One for the prices data, and one for each account data. In our example of 3 accounts, that is 4 Observers per consumer , one for prices and one for each account, for every use of usePortfolioValue() across our app.

Another thing worth noticing is what happens when our cached data changes.

If prices change, the prices Observer notifies the component and it rerenders. The mergeAssets() function, however, won’t run. It lives in a different Observer, the one watching the accounts, and none of the queries that Observer watches has changed. combine is memoized per Observer, so it hands back the previous result untouched. The useMemo() deps do change, of course, so we get a new portfolio value.
If an account’s data change, the corresponding Observer will run the combine method (our mergeAssets()) which will return new results. useMemo() runs again and our components rerender.

2. Combine in `combine` of `useQueries`

Did you notice how useful that combine memoization is? This next approach hands all the queries to one useQueries call, so the whole derivation gets it:

const usePortfolioValue = () => {
  const accountIds = useAccountIds()

  const { data } = useQueries({
    queries: [
      ...accountIds.map(assetsQuery),
      pricesQuery()
    ],
    combine: combineResults
  })

  return data
}

// prices was listed last, so everything before it is an account
const combineResults = (results) => {
  const assetsPerAccounts = results.slice(0, -1)
  const prices = results.at(-1)?.data ?? {}

  return reduceTotalValue(mergeAssets(assetsPerAccounts), prices)
}

reduceTotalValue() and mergeAssets() stay the same as before, nothing new here about them. What is new is that reduceTotalValue() is no longer called at the component/hook render function level but rather in the Observer level, just like our mergeAssets() from before. That means the result is memoized, and the output of combine runs through structural sharing before it reaches the consumer, so the components rerender only when the portfolio value actually changes. If, for example, prices of two assets change together and they cancel each other out, the components won’t rerender. I wouldn’t judge you if you think this is a stupid example. But at least it demonstrates my point.

Did you notice something, though? What happens now if only 1 price changes? The Observer will run combineResults() which itself will run mergeAssets() and the new portfolio value is returned. In our previous approach, mergeAssets() didn’t need to run. The assets didn’t change, only a price changed.

You traded one optimization for another. If your mergeAssets() is the expensive one, prefer the first approach. If your reduceTotalValue() is the expensive one, prefer the latter one.

(I’d add that you’re also trading some code readability.)

As for the number of Observers, nothing changed. Still 4 Observers per consumer. Same queries, just combined in a different place.

You are happy with your usePortfolioValue() hook, you pat yourself on the back, and you start using it around in your codebase. In fact, you realize you need to calculate the allocation percentage for each asset row, so you decide to use your new hook on each asset row. Now, usePortfolioValue() has 6 consumers, the header value, and each row.

(If you think this example is not realistic and that the developer should instead prop-drill the value or put it in a Context, you have a point. That is a discussion of its own and I cover it in a follow-up. Here it is just a way to illustrate the other approaches.)

Total value
$48,150.00 <- usePortfolioValue()

Asset Allocation % Value
───────────────────────────────────────────
AAPL ██████░░░░░░░░░░░░░░ 32% $15,408 <- usePortfolioValue()
VWRL █████░░░░░░░░░░░░░░░ 24% $11,556 <- usePortfolioValue()
BTC  ████░░░░░░░░░░░░░░░░ 18% $8,667 <- usePortfolioValue()
MSFT ███░░░░░░░░░░░░░░░░░ 16% $7,704 <- usePortfolioValue()
GOLD ██░░░░░░░░░░░░░░░░░░ 10% $4,815 <- usePortfolioValue()
───────────────────────────────────────────
                              100% $48,150

You think to yourself, “hmm… so much wasted computation. Every time I use usePortfolioValue(), the results of reduceTotalValue() and mergeAssets() need to be recalculated.” And you would be correct. No matter which of the above approaches you use, the results are cached either at the component level (in useMemo()) or in the Observer level (in combine). The results are cached per consumer.

There are several ideas on how to share a cache between consumers. One idea is to move the memoization outside of the components and the Observers completely by using a separate library like fast-memoize.js. There are, however, a few more ideas that don’t require an additional package, which you might find useful.

3. Combine in `queryFn` with `Promise.all`

One of these ideas is to move the derived value cache one level deeper. In the QueryCache itself. Who controls what goes in the QueryCache? The queryFn function of a Query. So here’s a take on it, using Promise.all():

const usePortfolioValue = () => {
  const accountIds = useAccountIds()

  const { data } = useQuery(portfolioQuery(accountIds))

  return data
}

const portfolioQuery = (accountIds) =>
  queryOptions({
    queryKey: ['portfolio', accountIds],
    queryFn: async () => {
      const assetsPromises = Promise.all(accountIds.map(fetchAccountAssets))
      const [assetsPerAccounts, prices] = await Promise.all([
        assetsPromises,
        fetchPrices()
      ])

      return reduceTotalValue(assetsPerAccounts.flat(), prices)
    }
  })

The derivation of the portfolio value now happens at the Query level and stored in the QueryCache. It is calculated on every refetch. It is not calculated per consumer anymore. When all 6 of the above components mount, the calculation will run only once. Your components now have a cache they can share. But at what cost?

Since the QueryCache now stores only the derived value, any component that simply needs the price of an asset needs to fetch it again:

const { data: prices } = useQuery(pricesQuery())

So one cost of a shared derived cache is additional network requests. You’ve lost granularity.

Another cost is error handling. I purposefully left loading and error states out of scope to keep the article content simple. But it’s worth talking about it here. With the above Promise.all() implementation, if any of the API calls returns an error, the whole Query throws and will be retried again, depending on your configuration. Imagine an extreme scenario where your app has 100 accounts, not 3. Fire 101 requests at the same time and you will most probably hit some rate limiting and 429s. Even if only 1 out of those 101 returns a 429, all 101 requests will then be retried.

This again, is a trade-off against additional network requests, and an even more dangerous one that you need to watch out for. You could, of course, reach for Promise.allSettled() but that wouldn’t solve your retry problem, unless you re-implement retries within the queryFn but let’s not get there.

Last thing worth mentioning: you are now down to 1 Observer per consumer , from 4. The whole fan-out moved inside the queryFn.

4. Combine in `queryFn` with `fetchQuery`

This loss of granularity really bugs you. But then you remember: The queryFn doesn’t care what’s inside as long as it’s a Promise. API calls return promises, of course, but so do queryClient.fetchQuery calls. What if we replaced our raw API calls from the example above with calls to the QueryCache?

const usePortfolioValue = () => {
  const accountIds = useAccountIds()

  const { data } = useQuery(portfolioQuery(accountIds))

  return data
}

const portfolioQuery = (accountIds) =>
  queryOptions({
    queryKey: ['portfolio', accountIds],
    queryFn: async () => {
      const assetsPromises = Promise.all(
        accountIds.map((id) => queryClient.fetchQuery(assetsQuery(id)))
      )
      const [assets, prices] = await Promise.all([
        assetsPromises,
        queryClient.fetchQuery(pricesQuery())
      ])

      return reduceTotalValue(assets.flat(), prices)
    }
  })

Now, look at that. With only a two-line change, each account keeps its own cache. Prices too. So we can still make the below calls anywhere in our app and we will hit the same cache:

useQuery(assetsQuery(accountId))
useQuery(pricesQuery())

Depending on staleTime, fetchQuery returns the cached value for everything still fresh and only fetches what was invalidated. And the composed result gets an entry too, computed once and read by everyone. I felt very proud when I came up with this idea, and very happy when I later discovered that TkDodo pointed at this solution as well, in a discussion titled, aptly, Derived Queries.

You must realize though what you have just traded, once again. A derived entry in the QueryCache is a snapshot. Not a subscription. If the prices query is invalidated, no consumer of usePortfolioValue() will re-render. The portfolioQuery has not been invalidated. Query invalidation for the portfolio value is now on your hands. I’ll save you the Uncle Ben quote here.

Nevertheless, it can be useful. If your app is built around manual invalidations, this can be a totally valid approach. In an app I’ve worked on I use a “change detection” query that asks the server “are there new data?” and invalidates several queries only when the answer is yes.

And like the previous approach, you are down to 1 Observer per consumer. Unlike it, each source keeps its own cache entry.

Which one to reach for

	Observers per consumer	Derivation runs	What you give up
1. Combine in the component	4	once per consumer	nothing shared between consumers
2. Combine in `combine`	4	once per consumer	any query data change re-runs the merge too
3. `Promise.all` in `queryFn`	1	once, shared	granular caches, and one failure retries everything
4. `fetchQuery` in `queryFn`	1	once, shared	you own invalidation of the derived entry

Reading it as a decision:

Few consumers? Stop at approach 1 or 2. The sharing the others buy you is not worth the trade. Pick between them by which function is the expensive one, mergeAssets() or reduceTotalValue().
Many consumers, and nothing else in the app needs the raw sources? Approach 3 is the simplest thing that shares the work. Watch the error handling.
Many consumers, and other screens do need the sources? Approach 4. Pay for it by invalidating the derived entry yourself. Or use an external library, which comes with its own trade-offs.

None of these is the right answer in general. They are four different answers to “where should this value be computed and cached”. Each of your use-cases can have a different answer. You are not restricted to using only one of them.

Conclusion

All above approaches are different ideas of how to implement your useQuery/useQueries hook wrappers. We started simple, by deriving and memoizing the data in the render functions, moving to memoizing them in the Observer level, and finally bringing them inside the QueryCache so that all consumers can have access to the same derived data. There are some things though that I alluded to but haven’t talked about.

I keep counting Observers and I never said why it matters. That turns out to be an article of its own, because it is really a question about where you call these hooks rather than how you write them.

TanStack Query encourages you to call them wherever you need the data. That advice is good, and it is not free. I built a slight variation of this portfolio page in nine different ways and measured each one. I’ll present my research in a follow-up article.

What do you think about these approaches? Have you thought of other ones? Did I miss a hidden trade-off? I’d be very happy to hear about it!

Reference of community discussions

Originally published at nop33.com.

Looking for (React) open-source contributors to reward

nop33 — Fri, 20 Dec 2024 12:11:00 +0000

As our user base grows so does the GitHub issue backlog. My teammate and I at Alephium would be delighted to collaborate with open-source contributors from the React community.

We will reward good code through our grands & rewards program. 🤑

Our codebase consists of a monorepo with a React webapp, a React Electron app, and a React Native app, alongside shared packages.

https://github.com/alephium/alephium-frontend/

Hit us up on Discord, Telegram, GitHub, X, or wherever you can find us!

Bun challenges: @shopify/react-native-skia

nop33 — Tue, 21 Nov 2023 13:51:00 +0000

At work we recently switched from a poly-repo to a mono-repo set up and from using npm to using Bun as our project manager. One of the challenges that I faced today was that I could not run our React Native app in an Android simulator anymore. The main error I was getting was this:

    Cannot find source file:

      node_modules/@shopify/react-native-skia/android/cpp/jsi/JsiHostObject.cpp

Click here for full traceback

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':shopify_react-native-skia:configureCMakeDebug[arm64-v8a]'.
> [CXX1429] error when building with cmake using /path/to/monorepo/node_modules/@shopify/react-native-skia/android/CMakeLists.txt: -- Android: Targeting API '21' with architecture 'arm64', ABI 'arm64-v8a', and processor 'aarch64'
  -- Android: Selected unified Clang toolchain
  -- The C compiler identification is Clang 12.0.8
  -- The CXX compiler identification is Clang 12.0.8
  -- Detecting C compiler ABI info
  -- Detecting C compiler ABI info - done
  -- Check for working C compiler: /path/to/android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/bin/clang - skipped
  -- Detecting C compile features
  -- Detecting C compile features - done
  -- Detecting CXX compiler ABI info
  -- Detecting CXX compiler ABI info - done
  -- Check for working CXX compiler: /path/to/android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/bin/clang++ - skipped
  -- Detecting CXX compile features
  -- Detecting CXX compile features - done
  -- Configuring done

  C++ build system [configure] failed while executing:
      /path/to/android/sdk/cmake/3.22.1/bin/cmake \
        -H/path/to/monorepo/node_modules/@shopify/react-native-skia/android \
        -DCMAKE_SYSTEM_NAME=Android \
        -DCMAKE_EXPORT_COMPILE_COMMANDS=ON \
        -DCMAKE_SYSTEM_VERSION=21 \
        -DANDROID_PLATFORM=android-21 \
        -DANDROID_ABI=arm64-v8a \
        -DCMAKE_ANDROID_ARCH_ABI=arm64-v8a \
        -DANDROID_NDK=/path/to/android/sdk/ndk/23.1.7779620 \
        -DCMAKE_ANDROID_NDK=/path/to/android/sdk/ndk/23.1.7779620 \
        -DCMAKE_TOOLCHAIN_FILE=/path/to/android/sdk/ndk/23.1.7779620/build/cmake/android.toolchain.cmake \
        -DCMAKE_MAKE_PROGRAM=/path/to/android/sdk/cmake/3.22.1/bin/ninja \
        "-DCMAKE_CXX_FLAGS=-fexceptions -frtti -std=c++1y -DONANDROID" \
        -DCMAKE_LIBRARY_OUTPUT_DIRECTORY=/path/to/monorepo/node_modules/@shopify/react-native-skia/android/build/intermediates/cxx/Debug/5v1r3a6q/obj/arm64-v8a \
        -DCMAKE_RUNTIME_OUTPUT_DIRECTORY=/path/to/monorepo/node_modules/@shopify/react-native-skia/android/build/intermediates/cxx/Debug/5v1r3a6q/obj/arm64-v8a \
        -DCMAKE_BUILD_TYPE=Debug \
        -DCMAKE_FIND_ROOT_PATH=/path/to/monorepo/node_modules/@shopify/react-native-skia/android/.cxx/Debug/5v1r3a6q/prefab/arm64-v8a/prefab \
        -B/path/to/monorepo/node_modules/@shopify/react-native-skia/android/.cxx/Debug/5v1r3a6q/arm64-v8a \
        -GNinja \
        -DANDROID_STL=c++_shared \
        -DREACT_NATIVE_VERSION=72 \
        -DNODE_MODULES_DIR=/path/to/monorepo/node_modules \
        "-DPREBUILT_DIR=/path/to/monorepo/node_modules/@shopify/react-native-skia/android/build/react-native-0*/jni"
    from /path/to/monorepo/node_modules/@shopify/react-native-skia/android
  -- ABI : arm64-v8a
  -- PREBUILT: /path/to/monorepo/node_modules/@shopify/react-native-skia/android/build/react-native-0*/jni
  -- BUILD : /path/to/monorepo/node_modules/@shopify/react-native-skia/android/build
  -- LIBRN :
  -- LOG : /path/to/android/sdk/ndk/23.1.7779620/toolchains/llvm/prebuilt/darwin-x86_64/sysroot/usr/lib/aarch64-linux-android/21/liblog.so
  -- JSI : ReactAndroid::jsi
  -- REACT : ReactAndroid::react_nativemodule_core
  -- FBJNI : fbjni::fbjni
  -- TURBO : ReactAndroid::turbomodulejsijni
  CMake Error at CMakeLists.txt:40 (add_library):
    Cannot find source file:

      /path/to/monorepo/node_modules/@shopify/react-native-skia/android/cpp/jsi/JsiHostObject.cpp

    Tried extensions .c .C .c++ .cc .cpp .cxx .cu .mpp .m .M .mm .ixx .cppm .h
    .hh .h++ .hm .hpp .hxx .in .txx .f .F .for .f77 .f90 .f95 .f03 .hip .ispc

  CMake Error at CMakeLists.txt:40 (add_library):
    No SOURCES given to target: rnskia

  CMake Generate step failed. Build files cannot be regenerated correctly.

However, the following file DID exist:

node_modules/@shopify/react-native-skia/cpp/jsi/JsiHostObject.cpp

Seems like some symlinking is not working properly.

This unrelated issue reminded me that:

Bun does not execute arbitrary lifecycle scripts for installed dependencies, such as postinstall and node-gyp buildshttps://bun.sh/guides/install/trusted

Solution

Adding a trustedDependencies property in the package.json file of my project, deleting the bun.lockb file and node_modules and reinstalling with bun i fixed the issue:

  "trustedDependencies": [
    "@shopify/react-native-skia"
  ]

rm -rf node_modules
rm bun.lockb
bun i

This is also verified when looking at the logs og the bun i command:

Updating symlinks for Android build...
Creating symlink to api /path/to/monorepo/node_modules/@shopify/react-native-skia/scripts /path/to/monorepo/node_modules/@shopify/react-native-skia
Creating symlink to jsi /path/to/monorepo/node_modules/@shopify/react-native-skia/scripts /path/to/monorepo/node_modules/@shopify/react-native-skia
Creating symlink to rnskia /path/to/monorepo/node_modules/@shopify/react-native-skia/scripts /path/to/monorepo/node_modules/@shopify/react-native-skia
Creating symlink to skia /path/to/monorepo/node_modules/@shopify/react-native-skia/scripts /path/to/monorepo/node_modules/@shopify/react-native-skia
Creating symlink to utils /path/to/monorepo/node_modules/@shopify/react-native-skia/scripts /path/to/monorepo/node_modules/@shopify/react-native-skia
Symlinks created successfully.

Storing a function in React state

nop33 — Wed, 07 Jun 2023 14:11:00 +0000

I felt very React-dumb today. I simply wanted to store a function in the state of a React component. So, I would initialize the component state:

const [myCallback, setMyCallback] = useState<() => void>()

and later in the code I would have a button that sets this state:

const cb = () => console.log('hi!')
setMyCallback(cb)

I’ve been breaking my head on why the hell my callback function gets called even though I never call it anywhere in my code! Notice that we didn’t execute cb() or myCallback() anywhere.

The problem is that the argument of the setState functions can be a function that let’s us update the state based on the previous value. See the docs of setState for details. React cannot tell if the function we pass is the aforementioned function, or the value that we want to store in our state. A solution to this is to simply wrap the value we want to store into a function:

setMyCallback(() => cb)

So funny yet so frustrating at the same time! Hope I save someone’s time!

Using npm distribution tags the right way

nop33 — Sat, 02 Apr 2022 15:06:00 +0000

I learnt a lot about npm package distribution tags at work in the past couple of weeks and I thought to share my learnings in this blog post.

Publishing a package on npm is quite simple. All you need is an account on npmjs.com and a project containing a package.json file. Then, with a few simple commands you can publish your package to npm:

npm login
npm publish

The above command will pack your project and deploy it to the npm registry. What’s more, is that it will make the latest distribution tag of your npm package point to the version of the package that is defined in the package.json file:

// Example package.json file
{
  "version": "0.1.0"
}

But what is a distribution tag?

What this means is that when a user of your package installs it with npm i my-awesome-package or npm i my-awesome-package@latest it will install version 0.1.0 from the example above. So, when running npm publish in a project where the version in package.json is set to 0.1.0, the latest package distribution tag is an alias to the 0.1.0 version of your package.

But what if you want to publish a version of your package to npm, but you don’t want the latest alias to point to that version? You may want, for example, to publish a release candidate version (say 1.0.0-rc.0) so that your users can download it (with npm i my-awesome-package@1.0.0-rc.0) and test your upcoming changes before you publish a new patch/minor/major version of your package. But while you want your release candidate to be available on npmjs.com for people to find and download, you don’t want this version to show up when users are upgrading their packages, for example, with npm outdated and npm upgrade, nor when users install it with npm i my-awesome-package.

The answer is in the docs of npm publish. Running npm publish is the same as running npm publish --tag latest. That’s why the package version is always mapped to the latest distribution tag. You can easily override this, by simply providing a different distribution tag. The mistake I made (guilty for not reading the distribution tags docs properly) was that I thought “OK, I can just pass the version of my package as the tag and then the latest won’t point to it”. So I tried:

npm publish --tag 1.0.0-rc.0

only to receive the error message:

npm ERR! Tag name must not be a valid SemVer range

Going back to the docs helped me understand the issue better. But it was this StackOverflow answer that really brought the issue home.

Package distribution tags are not meant to be version numbers. They are aliases to version numbers. They are words like latest, stable, next, rc, experimental, etc.

So, the correct way to publish a release candidate to npm, without making the latest alias point to it is to run

npm publish --tag rc

Workflow for versioning and publishing

Overall, this is the workflow I follow to version my package and publish it on npm:

Step 1 : Bump the version of the package with npm version to create a git commit and a git tag (not to be confused with package distribution tags as I did above):

npm version patch # for a patch version
npm version minor # for a minor version
npm version major # for a major version
npm version prerelease --pre-id rc # for a release candidate version

Step 2 : Have a GitHub Action workflow that runs when pushing tags on GitHub. The workflow:

reads the name of the tag that was pushed
defines the distribution tag (latest if the tag matches the pattern X.Y.Z or rc if it matches the pattern X.Y.Z-rcN)
runs npm publish --tag [latest|rc]

Step 3 : Push generated tag on GitHub to trigger the workflow

Step 4 : Profit ✅

Tips

Something that helped me clear things out in my head was the command npm view. You can run it to inspect any published package on npm. For example, you can use it to inspect the distribution tags of a package:

$ npm view web3 dist-tags
{ latest: '1.7.1', next: '2.0.0-alpha.1', rc: '1.7.2-rc.0' }

Git commits from GitLab CI

nop33 — Wed, 04 Aug 2021 00:00:00 +0000

Last week I implemented a search functionality for a static website with Lunr.js. The way I implemented the search system, depends on 2 files to work, the pagesData.json and the searchIndex.json. These 2 files get generated by running an npm script (I called it yarn createSearchIndex) which will parse all markdown files of the static website (pages and blog posts) and create the 2 aforementioned files. Obviously, I do not want to be responsible for running this script on my machine every time someone publishes a new blog post through our CMS (we use NetlifyCMS, so when someone wants to create a new blog post, they simply log in into the CMS, create the blog post, and the CMS will create a new commit on the branch NetlifyCMS connected to). What I want is the following:

User commits a new blog post in branch main
A GitLab CI pipeline is triggered, which runs the yarn createSearchIndex script, which in turn generates the new pagesData.json and the searchIndex.json files
GitLab CI commits the new pagesData.json and searchIndex.json files without triggering a new CI pipeline

Allowing GitLab runner to push to the git repo

We need to ensure that the GitLab runner machine can push new changes to our repository, so we need to have an SSH key and a git user.

Create SSH key pair

Create a public (deploy_key.pub) and private (deploy_key) SSH key pair without a passphrase with:

ssh-keygen -f deploy_key -N ""

Create environment variables

In the settings/ci_cd page of your GitLab project, define 3 environment variables:

CI_GIT_USER_EMAIL with the email of the git user that will appear in the commits made by the GitLab runner
CI_GIT_USER_USERNAME with the name of the git user that will appear in the commits made by the GitLab runner
SSH_PRIVATE_KEY with the contents of the private SSH key (you can copy the contents with pbcopy < deploy_key)

Create deploy key

In the settings/repository page of the GitLab project we need to create a deploy key. Create a new deploy key and paste the contents of the previously generated public key (pbcopy < deploy_key.pub).

Make sure to enable Grant write permissions to this key, otherwise the runner won’t be able to push new commits.

Write .gitlab-ci.yml file

A basic version of my .gitlab-ci.yml file looks like this:

image: node:14

stages:
  - commit

update-index:
  stage: commit
  before_script:
      # Set up the SSH key and the known_hosts file
    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
    - eval $(ssh-agent -s)
    - echo "${SSH_PRIVATE_KEY}" | tr -d '\r' | ssh-add - > /dev/null
    - mkdir -p ~/.ssh
    - ssh-keyscan my.selfhostedgitlab.com >> ~/.ssh/known_hosts
  script:
      # Configure git
    - git config --global user.email "${CI_GIT_USER_EMAIL}"
    - git config --global user.name "${CI_GIT_USER_USERNAME}"
      # Cone git repo
    - git clone git@my.selfhostedgitlab.com:${CI_PROJECT_PATH}.git
    - cd ${CI_PROJECT_NAME}
    - git checkout main
      # run scripts to generate new pagesData.json and searchIndex.json
    - yarn && yarn createSearchIndex
      # Check if there is something to commit, commit files, and push
    - |
      if [[-n $(git status --porcelain)]]; then
        git add src/pagesData.json src/searchindex.json &&
        git commit -m "Update search index" &&
        git push origin main -o ci.skip
      fi
  only:
    - main

Make sure to add the -o ci.skip flag in the git push command, so that you don’t trigger another pipeline.

The commit should then appear, with the name of the git user you have configured:

Resources

These resources helped me figure it out:

Photo by Pankaj Patel on Unsplash

Question regarding best practice on managing state

nop33 — Thu, 22 Jul 2021 12:52:04 +0000

I am working on an app that presents a list of questions to the user and expects answers. The representation of data is something like this:

const steps = [
  {
    title: "Health",
    question: "How satisfied are you with Health",
    answer: null,
  },
  {
    title: "Career",
    question: "How satisfied are you with Career",
    answer: null,
  },
  {
    title: "Love",
    question: "How satisfied are you with Love",
    answer: null
  },
];

My question is, should I store this whole object in the state, or only store the answers?

In the first case, the code would look something like the following. Here we can see that questions and answers are bundled together, which makes it easier to iterate over them and display them together.

const WheelOfLife = () => {
  const [stepsData, setStepsData] = useState([
    {
      title: "Health",
      question: "How satisfied are you with Health",
      answer: null,
    },
    {
      title: "Career",
      question: "How satisfied are you with Career",
      answer: null,
    },
    {
      title: "Love",
      question: "How satisfied are you with Love",
      answer: null
    },
  ])

  const setAnswer = (index, answer) => {
    const newStepsData = [...stepsAnswers]
    newStepsData[index].answer = answer
    setStepsAnswers(newStepsData)
  }

  return (
    <ul>
      {stepsData.map(step => (
        <li key={step.title}>
          {step.title}: {step.answer}
        </li>
      ))}
    </ul>
  )
}

In the second case, I am following the recommendation of the React docs that says "Does it remain unchanged over time? If so, it probably isn’t state.", but now questions and answers are separated and it becomes a tiny bit more complicated to access the data:

const stepsData = [
  {
    title: "Health",
    question: "How satisfied are you with Health",
  },
  {
    title: "Career",
    question: "How satisfied are you with Career",
  },
  {
    title: "Love",
    question: "How satisfied are you with Love",
  },
];

const WheelOfLife = () => {
  const [stepsAnswers, setStepsAnswers] = useState(new Array(stepsData.length))

  const setAnswer = (index, answer) => {
    const newStepsAnswers = [...stepsAnswers]
    newStepsAnswers[index] = answer
    setStepsAnswers(newStepsAnswers)
  }

 return (
    <ul>
      {stepsData.map((step, index) => (
        <li key={step.title}>
          {step.title}: {stepsAnswers[index]}
        </li>
      ))}
    </ul>
  )
}

Thank you for the feedback!

Splitting huge NetlifyCMS config.yml file to multiple JS files

nop33 — Thu, 15 Jul 2021 00:00:00 +0000

For a long time, I have been procrastinating in finding a solution to my ever-growing NetlifyCMS config.yml file.

Context

The website I have been working on consists of 18 unique pages (home page, about page, contact page, etc) as well as of a blog feature. The content of each page is stored in frontmatter inside markdown files, except for the content of the blog posts which is stored in actual markdown.

To demonstrate the differences between the content of each page, have a look at the following snippets of 3 of those pages:

Home page

---
title: Home
seo:
  title: Lorem ipsum dolor sit amet
  description: >-
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.
header:
  title:
    text_part_1: Sed ut perspiciatis
    text_part_2: unde omnis iste natus
  button:
    text: Lorem ipsum
    url: /lorem
  subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
key_facts_section:
  title: At vero eos et accusamus
  key_facts:
    - title: Et harum quidem
      icon: static/images/icons/clock.svg
    - title: Nam libero tempore
      icon: static/images/icons/earth.svg
testimonials: ...
---

About page

---
title: About
menu:
  footer:
    weight: 40
  main:
    weight: 20
seo:
  title: Quis autem vel eum
  description: Et harum quidem rerum facilis est et expedita distinctio.
header:
  title: About
video_section:
  text: >-
    Et harum quidem rerum facilis est et expedita distinctio. Nam libero
    tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus
    id quod maxime placeat facere possimus.
  title: Rerum necessitatibus saepe
  video: https://player.vimeo.com/video/845028457
team_section: ...
---

Blog post

---
title: Et harum quidem rerum facilis est et expedita
date: 2017-02-28
description: >-
  Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
  quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
  est, omnis dolor repellendus. Temporibus autem quibusdam et aut.
image: /images/uploads/featured-image.jpg
---
This is the body of the **blog post** , written in markdown.

As you can see the content of each page is vastly different from the others, yet there are some patterns that repeat themselves. To create a NetlifyCMS configuration file for all of the 18 pages and other data files I needed a 2’000 lines of code config.yml file. This approach works, but the code is not very DRY and it is really hard to change something or add something new. It’s time to improve.

Make the NetlifyCMS configuration code DRY

One valid approach to not repeatting parts of the YAML configuration would be to use YAML anchors (&), aliases (*), and overrides (<<). But I discovered a better approach. ✨

Using JavaScript instead of YAML

Through the related GitHub issue and the new beta NetlifyCMS feature of manual initialization I discovered that I am not restricted to using YAML to configure the CMS. Using JS does not only allow me to split the configuration into multiple files but to create objects and functions to keep my code DRY as well.

File structure

The file structure that fits my needs is the following (the tree view is simplified to only show the related pages from the example snippets I mentioned above). Below I explain what the purpose and contents of each file are.

└── cms
    ├── index.js
    ├── editor-components.js
    └── config/
        ├── index.js
        ├── fields.js
        ├── patterns.js
        └── collections/
            ├── blog-posts
            │ └── index.js
            └── pages
                ├── about.js
                ├── blog.js
                ├── home.js
                └── index.js

`cms/index.js`

Here is where I import the NetlifyCMS library. This file will eventually be parsed by Webpack in my setup and included in the admin.html file that is used to load the CMS.

// Import NetlifyCMS library
import CMS from "netlify-cms";
import "netlify-cms/dist/cms.css";

// Import custom editor component from cms/editor-components.js
import myCustomEditorComponent from "./editor-components";
// Import NetlifyCMS JS configuration object from cms/config/index.js
import config from "./config";

// Disable loading of the configuration from the default config.yml file
window.CMS_MANUAL_INIT = true;
// Initialize NetlifyCMS with the JS configuration objext
window.CMS_CONFIGURATION = config;
CMS.init({ config });
// Register the custom editor component
CMS.registerEditorComponent(myCustomEditorComponent);

`cms/editor-components.js`

This file is not necessary to explain the setup, I’ve written another blog post on creating custom NetlifyCMS editor components, check it out!

`cms/config/index.js`

This is where we build our NetlifyCMS JS configuration object.

// Import the configuration of each collection from cms/config/collections
import blogPostsCollection from "./collections/blog-posts";
import pagesCollection from "./collections/pages";
import pressReleasesCollection from "./collections/press-releases";
import servicesCollection from "./collections/services";
import siteConfigurationCollection from "./collections/site-configuration";
import testimonialsCollection from "./collections/testimonials";

// Build the Netlify JS configuration object
const config = {
  backend: {
    name: "gitlab",
    repo: "website",
    branch: "staging",
    auth_type: "implicit",
    app_id: "MY_APP_ID",
    api_root: "https://my-self-hosted-gitlab.com/api/v4",
    base_url: "https://my-self-hosted-gitlab.com",
    auth_endpoint: "oauth/authorize",
  },
  // It is not required to set `load_config_file` if the `config.yml` file is
  // missing, but will improve performance and avoid a load error.
  load_config_file: false,
  publish_mode: "editorial_workflow",
  media_folder: "site/static/images/uploads",
  public_folder: "/images/uploads",
  collections: [
    // Include the collections imported from cms/config/collections
    pagesCollection,
    servicesCollection,
    blogPostsCollection,
    commonPageSectionsCollection,
    testimonialsCollection,
    pressReleasesCollection,
    siteConfigurationCollection,
  ],
};

export default config;

`cms/config/collections/pagesCollection/index.js`

This file groups together all the configuration objects from each individual page.

import { collectionDefaults } from "../../patterns";
import homePageConfig from "./home";
import aboutPageConfig from "./about";

const pagesCollection = {
  ...collectionDefaults("Pages", "pages"),
  files: [homePageConfig, aboutPageConfig],
};

export default pagesCollection;

`cms/config/collections/pagesCollection/home.js`

The configuration of a page. It utilizes fields and groups of fields (patterns) to keep the configuration code of the page DRY.

import { stringField, textField, objectField, listField } from "../../fields";
import {
  pageDefaults,
  buttonDefaults,
  titleWithSubtitleDefaults,
} from "../../patterns";

export default {
  label: "Home page",
  name: "home",
  file: "site/content/_index.md",
  fields: [
    ...pageDefaults,
    objectField("Header", "header", [
      ...titleWithSubtitleDefaults(),
      buttonDefaults(),
    ]),
    objectField("Keyfacts section", "keyfacts_section", [
      ...titleWithSubtitleDefaults(),
      listField("Keyfacts", "keyfacts", [
        stringField("Title", "title", true),
        textField("Text", "text"),
        stringField("Icon", "icon", true),
      ]),
    ]),
  ],
};

`cms/config/fields.js`

The basic building blocks of the configuration file. Creating functions that return JS objects allows us to keep the code DRY by passing the necessary parameters when needed.

export const textField = (label = "Text", name = "text", required = false) => ({
  label,
  name,
  widget: "text",
  required,
})

export const stringField = (
  label = "String",
  name = "string",
  required = false
) => ({
  label,
  name,
  widget: "string",
  required,
})

export const objectField = (
  label = "Object",
  name = "object",
  fields = [],
  required = true
) => ({
  label,
  name,
  widget: "object",
  fields,
  required,
})`

`cms/config/patterns.js`

Sometimes, patterns in the configuration of pages and collections emerge. This file groups fields together and exports these patterns.

import { stringField, textField, objectField, hiddenField } from "./fields";

export const collectionDefaults = (label, name) => ({
  label,
  name,
  editor: {
    preview: false,
  },
});

export const pageDefaults = [
  stringField("Menu title", "title", true),
  hiddenField("Menu", "menu"),
  objectField("SEO", "seo", [
    stringField("SEO title", "title"),
    textField("SEO description", "description"),
  ]),
];

export const multiColorTitleDefaults = objectField("Title", "title", [
  stringField("Text part 1", "text_part_1"),
  stringField("Text part 2", "text_part_2"),
]);

export const buttonDefaults = (label = "Button", name = "button") =>
  objectField(label, name, [
    stringField("Text", "text", true),
    stringField("URL", "url", true),
  ]);

export const titleWithSubtitleDefaults = (subtitleIsMarkdown = false) => [
  multiColorTitleDefaults,
  subtitleIsMarkdown
    ? markdownField("Subtitle", "subtitle")
    : textField("Subtitle", "subtitle"),
];

Conclusion

The above setup helped me reduce the total lines of code from around 2000 to just 900. It has also been proven that making updates to the configuration of each page has become a piece of cake 🍰 (navigating to the dedicated file is very easy by typing for example “cms about” into the search bar of my editor to reach the configuration of the about page).

Other resources

Configuring NetlicyCMS manual initialization in Gatsby

Embedding YouTube videos in Gatsby blog posts using NetlifyCMS

nop33 — Thu, 03 Jun 2021 00:00:00 +0000

In one of the websites I have built, I needed to be able to embed YouTube videos in the markdown content of the blog posts. I am using Gatsby together with NetlifyCMS.

Two are the things that I had to figure out:

How do I represent the YouTube video in markdown so that the gatsby-transformer-remark plugin (which is responsible for converting markdown to HTML) can render it? Bonus: How do I make sure that the iframe of the embedded videos is responsive and looks good on mobile devices?
How do I extend NetlifyCMS’ markdown widget to support adding YouTube links in the content, without forcing the user to switch to the markdown view?

The Gatbsy part

Thankfully, Gatsby’s ecosystem is huge! From Gatsby’s Working with Video guide, I discovered the gatsby-remark-embed-video plugin. This allows me to represent a YouTube video in markdown as a simple code block:

`youtube: https://www.youtube.com/watch?v=dQw4w9WgXcQ`

Simply install the plugin and include it in the list of plugins in gatsby-config.js:

yarn add gatsby-remark-embed-video

To ensure that the video will be responsive, use the gatsby-remark-responsive-iframe plugin and place it after the gatsby-remark-embed-video one, as recommended by the plugin’s author:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-embed-video`,
          `gatsby-remark-images`,
          `gatsby-remark-responsive-iframe`,
        ],
      },
    },
  ],
}

You can now add a YouTube video in your markdown file and Gatsby will know how to render it. Your markdown file should look something like this:

---
title: "Here is a blog post with a YouTube video"
date: "2020-06-03"
---

## This is my fav song of all times

Don't cha think?

`youtube: https://www.youtube.com/watch?v=dQw4w9WgXcQ`

The NetlifyCMS part

Great, now all we need is to figure out how to extend NetlifyCMS’ markdown widget to be able to add code blocks like the above to our markdown content. Checking out the official documentation of the markdown widget I discovered the guide about Creating Custom Widgets and specifically the registerEditorComponent method. And hey, what luck, there is an actual example of registering an editor component for adding YouTube videos! Today is a good day.

The question now is, where do I add the code to call this method? I am simply using the gatsby-plugin-netlify-cms plugin in my gatsby-config.js like so:

module.exports = {
  plugins: [`gatsby-plugin-netlify-cms`],
}

Diving into the documentation of the plugin, I discovered the modulePath option which lets me specify a path to a file where I can import the CMS object. Sweet!

Update your configuration to:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        modulePath: `${__dirname}/src/cms.js`,
      },
    },
  ],
}

and create the cms.js file in the /src directory (feel free to place it wherever you want as long as you link it properly in the gatsby-config.js file):

import CMS from "netlify-cms-app"

CMS.registerEditorComponent({
  id: "youtube",
  label: "YouTube",
  fields: [
    {
      name: "url",
      label: "Youtube video URL",
      widget: "string",
    },
  ],
  pattern: /^`youtube:\s(.*)`$/,
  fromBlock: function (match) {
    return {
      url: match[1],
    }
  },
  toBlock: function (obj) {
    return "`youtube: " + obj.url + "`"
  },
  toPreview: function (obj) {
    return obj.url
  },
})

To explain what's going on above:

The pattern attribute defines the regular expression that will look for the line in the markdown content that starts with the string "`youtube: " and catch anything that comes after it, which in our case is the link to the video.
The fromBlock attribute defines a function that is responsible to initialize the value of the rendered widget. In other words, it takes the link of the video from the pattern and adds it in the input field of the YouTube widget.
The toBlock function defines the representation of the YouTube video in the markdown content. To comply with the gatsby-remark-embed-video Gatsby plugin, this needs to be a line that starts with a backtick, followed by the word "youtube: ", followed by the video link, and ends with another backtick.

That’s it! You can now go to your CMS page, click the ”+” icon in the markdown editor, select “YouTube”, paste your YouTube link and save your blog post.

But what about Vimeo and VideoPress?

The gatsby-remark-embed-video plugin supports multiple video hosting services like Vimeo and VideoPress, not just YouTube (it also says it supports Twitch and Twitch live, but I couldn’t manage to make it work). Simply replace the instances of youtube with video in the cms.js file to support them!

From googling "React Native" to having a working app on my phone in 5 hours

nop33 — Thu, 20 May 2021 00:00:00 +0000

This morning I challenged myself to see how difficult it would be to have a running Android app installed on my phone, starting from scratch. I wanted a simple app that given a number it would calculate a random integer number between 1 and the number I provided. I wanna use it for performing a “random walk” using the train system of Switzerland to explore the country. I know, silly, but why not.

Setting up the dev environment

I started by googling “React Native”. Headed to the official website. I read through the home page, run the command to start a new project, and went on to read the basics and the getting started guide.

$ npx react-native init MyTestApp

The first thing I saw in the getting started guide is that I need to set up my dev environment. Since I am not familiar with mobile development, I decided to start with Expo CLI instead of the React Native CLI (which is what I used above to set up my first project). This SO thread describes well the differences between the 2 cli’s.

Simply following the Expo CLI Quickstart guide didn’t work. I installed the global expo-cli package, initialized a new project, started the development server, installed the Expo Go Android app on my phone, connected both my laptop and my phone on the same WiFi, but there was no QR code on my terminal to scan with the Expo Go app.

$ yarn global add expo-cli
...
success Installed "expo-cli@4.4.7" with binaries:
      - expo
      - expo-cli
✨ Done in 65.40s.

$ expo init AwesomeProject
✔ Choose a template: › minimal bare and minimal, just the essentials to get you started
✔ Downloaded and extracted project files.
🧶 Using Yarn to install packages. Pass --npm to use npm instead.
✔ Installed JavaScript dependencies.

$ cd AwesomeProject
$ yarn start
yarn run v1.22.10
$ react-native start

               ######                ######
             ###     ####        ####     ###
            ##          ###    ###          ##
            ##             ####             ##
            ##             ####             ##
            ##           ##    ##           ##
            ##         ###      ###         ##
             ##  ########################  ##
          ######    ###            ###    ######
      ###     ##    ##              ##    ##     ###
   ###         ## ###      ####      ### ##         ###
  ##           ####      ########      ####           ##
 ##             ###     ##########     ###             ##
  ##           ####      ########      ####           ##
   ###         ## ###      ####      ### ##         ###
      ###     ##    ##              ##    ##     ###
          ######    ###            ###    ######
             ##  ########################  ##
            ##         ###      ###         ##
            ##           ##    ##           ##
            ##             ####             ##
            ##             ####             ##
            ##          ###    ###          ##
             ###     ####        ####     ###
               ######                ######

                 Welcome to React Native!
                Learn once, write anywhere

To reload the app press "r"
To open developer menu press "d"

Next idea was to learn more about how this expo thing works. Going on Expo’s website, clicking Get Started, moving to the installation guide and finally to the Create a new app guide I found the command that displayed the QR code on my screen:

$ expo start

Scanning the QR code with the Expo Go app on my Android phone opened up the app on my phone. Editing the source code on my laptop changes quickly refreshes the app on my phone. Nice! The whole process took a bit less than 1.5h 🤦‍♂️ But whatever, we’re moving!

Coding the app

Without having much experience with React, I managed to code the simple concept of an app that I mentioned earlier by simply reading the Introduction, Core Components and Native Components, React Fundamentals and Handling Text Input React Native guides. Great, the app seems to be working on the dev environment, let’s compile it and install it on my phone, I said.

Compiling the app

Initially, I was planning on releasing the app on the Google Play Store and thus started by following the Publishing to Google Play Store guide of the React Native documentation. I installed the latest Java JDK, generated a private signing key, set up the Grandle variables, added the signing configuration to my app’s Grandle config file only to realize that the Google Play store required a $25 fee for registering. I decided to postpone it for the day that I’ll actually have a useful app I’d like to share with the world 😅

I moved on with generating the Android App Bundle with:

$ cd android
$ ./gradlew bundleRelease

but I received the error

General error during semantic analysis: Unsupported class file major version 60

The reason is that the Grandle 6.8 version that my app is using does not support the latest Java JDK (16). Someone commented literally 11 hours ago that Gradle 7.0 fully supports Java 16, so I upgraded Grandle by simply changing the version in the file android/gradle/wrapper/gradle-wrapper.properties, but now I got a new error after running the above command:

Plugin with id ‘maven’ not found

Decided to downgrade to Java 11:

$ brew install java11
$ echo 'export PATH="/usr/local/opt/openjdk@11/bin:$PATH"' >> ~/.zshrc
$ export CPPFLAGS="-I/usr/local/opt/openjdk@11/include"
$ source ~/.zshrc

but then I got yet another error:

Could not determine the dependencies of task ':app:bundleReleaseResources'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at '.../android/local.properties'.

After some googling on how to install the Android SDK (since the one I found in Homebrew is deprecated), I decided to install the Android Studio.

$ brew install --cask android-studio

I opened the application to download and install all necessary packages for Android development, including the Android SDK.

But we’re not done with errors apparently:

> Failed to install the following Android SDK packages as some licences have not been accepted.

To fix this, I installed the Android SDK command line tool:

Opened Android Studio
Went to SDK manager
Clicked on SDK tools tab
Installed Android SDK command line tool

For one last time, I run the build command and it finally worked:

$ ./gradlew bundleRelease
...
BUILD SUCCESSFUL in 3m 14s
494 actionable tasks: 494 executed

Installing the app on my Android phone

The last step of my challenge was to install the app on my phone. I figured the easiest way would be to move the output APK to my phone via USB. And so I did by installing and using the Android File Transfer app.

Conclusion

A few years back I was extremely hesitant and scared of even attempting to create a native app of my own. My impostor syndrome was hitting me hard every time I was facing a problem. An inner voice was judging me that I am not good enough and that I should not even try. If you are stuck in a similar situation, I hope that this blog post will unblock you from a potential roadblock you’re facing. Keep believing in your skill to learn. Not in your dev skills. It might have taken me 5 hours to simply set up a dev environment, code a simple app and figure out how to compile it and install it, but I did it. And so can you.

Using Ansible unarchive module with Alpine Linux

nop33 — Mon, 05 Apr 2021 15:18:00 +0000

If you are running Ansible on Alpine Linux and you use the unarchive builtin module you might have faced the following error message:

[Errno 2] No such file or directory: b'-T'

The reason for this is that the unzip tool in Alpine does not have a -T option. To be able to use the unarchive Ansible module with Alpine Linux, you need to install unzip:

apk add unzip

See the related GitHub issue.

Photo by Simon Fitall on Unsplash

Recording screen, mic input and audio output with one app

nop33 — Fri, 26 Mar 2021 00:00:00 +0000

I’ve been for years a very happy user of Kap, a free open-source app to record the screen of my MacBook.

Recently I wanted to perform some interviews during a requirements gathering process for a new project at work. I needed a way to record my screen, my voice but also the voice of the interviewee. Essentially I needed to capture:

Screen
Audio input
Audio output

So, as usual, I started with a simple Google search to see what is out there. I found many solutions that required downloading some apps (like Soundflower, LoopBack or ScreenFlow) and use some of them in combination with Quicktime Player, a native macOS app.

5 minutes had passed and I already felt overwhelmed. I thought this was gonna be easier. And then it hit me: “Why haven’t you checked if Kap can do that?”. Dah!

All I literally had to do was to go to the preferences of the app and turn 2 toggles on.

Enable Audio recording from the General tab
Enable the soundflower plugin from the Plugins tab

Finito.

DEV Community: nop33

How to Combine TanStack Query Data in React

The problem

1. Combine in the component

2. Combine in combine of useQueries

3. Combine in queryFn with Promise.all

4. Combine in queryFn with fetchQuery

Which one to reach for

Conclusion

Reference of community discussions

Looking for (React) open-source contributors to reward

Bun challenges: @shopify/react-native-skia

Click here for full traceback

Solution

Storing a function in React state

Using npm distribution tags the right way

Workflow for versioning and publishing

Tips

Git commits from GitLab CI

Allowing GitLab runner to push to the git repo

Create SSH key pair

Create environment variables

Create deploy key

Write .gitlab-ci.yml file

Resources

Question regarding best practice on managing state

Splitting huge NetlifyCMS config.yml file to multiple JS files

Context

Make the NetlifyCMS configuration code DRY

Using JavaScript instead of YAML

File structure

cms/index.js

cms/editor-components.js

cms/config/index.js

cms/config/collections/pagesCollection/index.js

cms/config/collections/pagesCollection/home.js

cms/config/fields.js

cms/config/patterns.js

Conclusion

Other resources

Embedding YouTube videos in Gatsby blog posts using NetlifyCMS

The Gatbsy part

The NetlifyCMS part

But what about Vimeo and VideoPress?

From googling "React Native" to having a working app on my phone in 5 hours

Setting up the dev environment

Coding the app

Compiling the app

Installing the app on my Android phone

Conclusion

Using Ansible unarchive module with Alpine Linux

Recording screen, mic input and audio output with one app

2. Combine in `combine` of `useQueries`

3. Combine in `queryFn` with `Promise.all`

4. Combine in `queryFn` with `fetchQuery`

`cms/index.js`

`cms/editor-components.js`

`cms/config/index.js`

`cms/config/collections/pagesCollection/index.js`

`cms/config/collections/pagesCollection/home.js`

`cms/config/fields.js`

`cms/config/patterns.js`