recoil-sync questions

[Gumichocopengin8]

First, thank you for creating these great libraries.
I got some questions while I was developing with Recoil.

• Is it possible to remove "" from query params when refine type is string? Currently it's like ?query="value", it would be nice to have ?query=value. That would be ideal to handle query params like query-string
• Is there a plan to support io-ts instead o refine?
• Is it possible to add query params when recoil states are initialized? Currently query params are not in url until states are updated
• Is it possible to ignore a certain value from query params in atomFamily?
  • For example using the code below, I wanna only use field1 and field2 as query params.
• Is it possible to set default value in atom when a component is mounted?
  • The thing I wanna do here is that the state is synced with db, but when query params are set when page is loaded, state should take the query param value. When user move to different page and come back, the state should take db value
  • Probably https://recoiljs.org/docs/guides/asynchronous-data-queries#userecoilrefresher?
• Is it possible to set refine type dynamically for atomFamily? Here's an example blow with code

 const formState = atom({
 key: 'formState',
 default: {
   field1: 1, // number
   field2: "2", // string
   field3: true, // boolean
 },
});

const formFieldStateSelector = selectorFamily({
 key: 'formFieldStateSelector',
 get: field => ({get}) => get(formState)[field],
});

// use atomFamily here to use atom effect
const formFieldState = atomFamily({
 key: 'formFieldState', 
 default: formFieldStateSelector,
 effect: (field) => [
   urlSyncEffect({ refine: /* I wanna define refine dynamically  */, history: 'replace', storeKey: 'query' })  // <- here
 ]
});

[drarmstr]

Is it possible to remove "" from query params when refine type is string? Currently it's like ?query="value", it would be nice to have ?query=value. That would be ideal to handle query params like query-string

The quoting or other encoding is not part of the core <RecoilSync> or even the URL syncing but is rather part of the encoding layer on top such as <RecoilURLSyncJSON> `. The quotes are added as part of the JSON encoding of strings. I think it makes sense to add an additional encoding type for standard simple URL params, such as unquoted strings and vector entries. Please feel free to submit a PR for this!

Is there a plan to support io-ts instead o refine?

Someone did create an adapter layer from Refine to another similar library. I forget the name off-hand.. But, perhaps a similar solution could work here?

Is it possible to add query params when recoil states are initialized? Currently query params are not in url until states are updated

Yes, the syncDefault option in syncEffect() can do this.

Is it possible to ignore a certain value from query params in atomFamily?
For example using the code below, I wanna only use field1 and field2 as query params.

One option is to break this up into separate atoms. You can also create custom read/write callbacks in syncEffect() to achieve skipping the field3 property.

Is it possible to set default value in atom when a component is mounted?
The thing I wanna do here is that the state is synced with db, but when query params are set when page is loaded, state should take the query param value. When user move to different page and come back, the state should take db value

If you want mounting a component to have side-effects for setting state then would useEffect() be appropriate for this?

Is it possible to set refine type dynamically for atomFamily? Here's an example blow with code

Not sure what you mean by "dynamically"? It is called for each member in the family, so you could theoretically have a different type for each atom in the family based on the family parameter.

[Gumichocopengin8]

Thank you for answering these questions.

Is it possible to ignore a certain value from query params in atomFamily?
For example using the code below, I wanna only use field1 and field2 as query params.

One option is to break this up into separate atoms. You can also create custom read/write callbacks in syncEffect() to achieve skipping the field3 property.

I'm not sure if I can break this up into separate atoms. Is there any way to do something like the following?

 const formState = atom({
 key: 'formState',
 default: {
   field1: 1, // number
   field2: "2", // string
   field3: true, // boolean
 },
});

const formFieldStateSelector = selectorFamily({
key: 'formFieldStateSelector',
get: field => ({get}) => get(formState)[field],
});

const field1Atom = atom({
 key: 'field1Atom',
 default: formFieldStateSelector('field1') // <- I wanna do something like this to break this up into separate atoms
})

---

Is it possible to set refine type dynamically for atomFamily? Here's an example blow with code

Not sure what you mean by "dynamically"? It is called for each member in the family, so you could theoretically have a different type for each atom in the family based on the family parameter.

What I meant is that formState stores an object, and each field has different type; field1 is number, field2 is string etc.
I wanna set refine that matches the field's type. That's what dynamic is meant. Sorry for the confusion.

 const formState = atom({
 key: 'formState',
 default: {
   field1: 1, // number
   field2: "2", // string
   field3: true, // boolean
 },
});

const formFieldStateSelector = selectorFamily({
 key: 'formFieldStateSelector',
 get: field => ({get}) => get(formState)[field],
});

// use atomFamily here to use atom effect
const formFieldState = atomFamily({
 key: 'formFieldState', 
 default: formFieldStateSelector,
 effect: (field) => [
   urlSyncEffect({ refine: /* I wanna define refine dynamically; number() for field1, string() for field2 etc   */,  // <- here
        history: 'replace', storeKey: 'query' 
    }) 
 ]
});