Got TypeError: Object(...) is not a function when trying to import { selectorFamily } from "recoil"

[jimmyandrade]

Developer Story

As a developer
I want to use the selectorFamily helper function
So that I can make asynchronous queries with parameters

Description

I am trying to make an asynchronous data query with parameters. So I am trying to use the selectorFamily helper. But when I try to import { selectorFamily } from "recoil", the application throws TypeError: Object(...) is not a function.

How to fix it

Maybe exporting the selectorFamily helper at the recoil library.

Steps to reproduce the behavior

1. Initialize or open a React project;
2. Run npm install recoil --save-exact to install version 0.0.7;
3. Create a JS file;
4. Try to import { selectorFamily } from "recoil" in this file;
5. Run npm start and check if error occurs.

Expected behavior

Application should not throw a TypeError.

Actual behavior

TypeError: Object(...) is not a function
Module.<anonymous>
src/recoil/selectors/reportedParkingsQuery.js:20

  17 |   throw error.response.error
  18 | }
  19 | 
> 20 | export const reportedParkingsQuery = selectorFamily({
  21 |   key: "ReportedParkings",
  22 |   get: (carPlate) => async ({ get }) => {
  23 |     const response = await getParkingsByCarPlate(carPlate)

Module../src/recoil/selectors/reportedParkingsQuery.js
http://localhost:8000/commons.js:120193:30
__webpack_require__
/webpack/bootstrap:789

Environment

• OS: macOS Catalina 10.15.4 (19E287);
• Node version: v12.16.0;
• NPM version: 6.13.4;
• React version: 16.13.1;
• Recoil version: 0.0.7.

Related code

Recoil/src/recoil_values/Recoil_selectorFamily.js

Lines 88 to 135 in 1e6e077

	function selectorFamily<T, Params: Parameter>(
	options:
	| ReadOnlySelectorFamilyOptions<T, Params>
	| ReadWriteSelectorFamilyOptions<T, Params>,
	): Params => RecoilValue<T> {
	let selectorCache =
	options.cacheImplementationForParams_UNSTABLE?.() ??
	cacheWithValueEquality();
	return (params: Params) => {
	const cachedSelector = selectorCache.get(params);
	if (cachedSelector != null) {
	return cachedSelector;
	}
	const myKey = `${options.key}__selectorFamily/${
	stableStringify(params, {
	// It is possible to use functions in parameters if the user uses
	// a cache with reference equality thanks to the incrementing index.
	allowFunctions: true,
	}) ?? 'void'
	}/${nextIndex++}`; // Append index in case values serialize to the same key string
	const myGet = callbacks => options.get(params)(callbacks);
	const myCacheImplementation = options.cacheImplementation_UNSTABLE?.();
	let newSelector;
	if (options.set != null) {
	const set = options.set;
	const mySet = (callbacks, newValue) => set(params)(callbacks, newValue);
	newSelector = selector<T>({
	key: myKey,
	get: myGet,
	set: mySet,
	cacheImplementation_UNSTABLE: myCacheImplementation,
	dangerouslyAllowMutability: options.dangerouslyAllowMutability,
	});
	} else {
	newSelector = selector<T>({
	key: myKey,
	get: myGet,
	cacheImplementation_UNSTABLE: myCacheImplementation,
	dangerouslyAllowMutability: options.dangerouslyAllowMutability,
	});
	}
	selectorCache = selectorCache.set(params, newSelector);
	return newSelector;
	};
	}

[drarmstr]

selectorFamily isn't currently exported in published version on npm. Though, the code is there so you can explore using it directly. #33 should help fix the exporting issue for the open-source version.

Note that we want to keep the core API simple. So, optional helpers built on top of the core API are being exported in a RecoilUtils module.

[jimmyandrade]

@drarmstr thank you.

Since, for now, the code is not exported nicely with the build, does it make sense to put that information at selectorFamily at docs, and update it as #33 is fixed?

[drarmstr]

@jimmyandrade The code is available here, it's just not being exported nicely with the build. Thanks for bearing with us as we're getting the initial release of this beta library up and going.

[jimmyandrade]

Thank you for the support.

And, sorry, I didn't express myself well in the last comment. I've found the helper function code:

Recoil/src/recoil_values/Recoil_selectorFamily.js

Lines 88 to 135 in 1e6e077

	function selectorFamily<T, Params: Parameter>(
	options:
	| ReadOnlySelectorFamilyOptions<T, Params>
	| ReadWriteSelectorFamilyOptions<T, Params>,
	): Params => RecoilValue<T> {
	let selectorCache =
	options.cacheImplementationForParams_UNSTABLE?.() ??
	cacheWithValueEquality();
	return (params: Params) => {
	const cachedSelector = selectorCache.get(params);
	if (cachedSelector != null) {
	return cachedSelector;
	}
	const myKey = `${options.key}__selectorFamily/${
	stableStringify(params, {
	// It is possible to use functions in parameters if the user uses
	// a cache with reference equality thanks to the incrementing index.
	allowFunctions: true,
	}) ?? 'void'
	}/${nextIndex++}`; // Append index in case values serialize to the same key string
	const myGet = callbacks => options.get(params)(callbacks);
	const myCacheImplementation = options.cacheImplementation_UNSTABLE?.();
	let newSelector;
	if (options.set != null) {
	const set = options.set;
	const mySet = (callbacks, newValue) => set(params)(callbacks, newValue);
	newSelector = selector<T>({
	key: myKey,
	get: myGet,
	set: mySet,
	cacheImplementation_UNSTABLE: myCacheImplementation,
	dangerouslyAllowMutability: options.dangerouslyAllowMutability,
	});
	} else {
	newSelector = selector<T>({
	key: myKey,
	get: myGet,
	cacheImplementation_UNSTABLE: myCacheImplementation,
	dangerouslyAllowMutability: options.dangerouslyAllowMutability,
	});
	}
	selectorCache = selectorCache.set(params, newSelector);
	return newSelector;
	};
	}

[davidmccabe]

Hey @jimmyandrade, sorry about that mis-match. We are pretty new at this. Anyway, selectorFamily is (for now) just a simple memoized function, although we will probably add some other tricks for memory management soonish. Hope that unblocked you for now?

[jimmyandrade]

Hey @davidmccabe! Don't worry, the work you people are doing is already helping a lot.

In fact, I still haven't been able to unlock what I need. I'm talking about it here: #178

[kivervinicius]

@jimmyandrade Hey bro, do you already resolved this?

[timeswind]

Is this the same issue for using atomFamily?

[Cadrach]

Hi there, thanks for the work on this library!

Is there an easy way to use selectorFamily in recoil currently? I have looked at #33 and #82 but it does not seem to be quite there yet...

[drarmstr]

@timeswind - Yes, same issue for atomFamily or any of the other utils

@Cadrach - Can you fork the repository instead of using the NPM package as a workaround for now? We're getting close, though..