babel-plugin-react-query-string-key-gen

babel-plugin-react-query-string-key-gen

Problem

React Query uses the convention of a string key as a unique, readable identifier for queries. However, naming things well is difficult. Poor naming causes further confusion for the next person reading your code.

Solution

We could generate this key at build-time, inferring from the name of it's associated query function. Why name things twice when you can just reuse what's already there? This babel plugin will statically analyze your code and extract the query function name from your useQuery hooks.

Installation

yarn: yarn add babel-plugin-react-query-string-key-gen --dev

npm: npm install babel-plugin-react-query-string-key-gen --dev

Then, add plugin to your .babelrc

{
  "plugins": ["babel-plugin-react-query-string-key-gen"]
}

Usage

You now have the option to exclude the string identifier from your query key if you want. However, if you do choose to include a string key manually, then nothing will change. This is to provide flexibility and ease of migration if you do decide to use this plugin.

This plugin makes a few assumptions about your query key order and query function:

1. It expects your unique string key to always be the first element in your array key.
2. If you are using inline, anonymous query functions, it will try to infer the query function name from your function scope.
3. If the name cannot be inferred and your unique string key is missing, a uuid will be generated for that query.
4. If all you need is a simple string key, you can pass an empty string or empty array to the queryKey param and a key will be generated for you.