Signal store - How to get the types right for a custom store feature that uses factory-method?

[PhilippMDoerner]

Heyho, thought I'd make a new question as this is the result of this question.

I'm now trying to make a withQueries signal-store-feature that takes a factory function same as withMethods.
There the user defines a dictionary of queries - functions that return observables - whose data gets transferred to the store etc.

The fields I create are based on the keys on the returned object by the factory, so the syntax I'm going for is something like this:

export const SomeStore = signalStore(
  withState({ someVal: 'init' }),
  withQueries(store => {
    const service1 = inject(Service1);
    const service2 = inject(Service2);
    return {
      data1: (params: Params1) => service1(params),
      data2: (params: Params2) => service2(params, store.someVal()),
    } 
  });
)

Which should create a store with the added state signals:
someVal, data1, data1Errors, data1QueryState, data2, data2Errors, data2QueryState as well as the rxMethods loadData1 and loadData2.

Now I'm struggling to create a way to add that state from said factory function, as apparently the type of the store does not match what I'm expecting (?).

This is as far as I've gotten so far (Note, there are some import errors in the stackblitz that do not occur locally on my machine, notably when importing from '@ngrx/signals/src/signal-store-models'):

type QueriesFactory<
  Input extends SignalStoreFeatureResult,
  Methods extends MethodsDictionary,
> = (
  store: Prettify<
    StateSignals<Input['state']> &
      Input['computed'] &
      Input['methods'] &
      WritableStateSource<Prettify<Input['state']>>
  >,
) => Methods;

function withQueriesState<
  Input extends SignalStoreFeatureResult,
  InputMethods extends MethodsDictionary,
  State extends object,
>(
  queriesFactory: QueriesFactory<Input, InputMethods>,
): SignalStoreFeature<Input, { state: State; computed: {}; methods: {} }> {
  return ((store) => {
    const newState = queriesFactory({
      [STATE_SOURCE]: store[STATE_SOURCE],
      ...store.stateSignals,
      ...store.computedSignals,
      ...store.methods,
    });
    const queryStates = Object.keys(newState)
      .map((queryName) => getKeys(queryName))
      .map((keys) => ({
        [keys.dataField]: undefined,
        [keys.errorField]: undefined,
        [keys.queryStateField]: 'init' satisfies QueryState,
      }));

    const queryStateSignals = queryStates.reduce(
      (acc, queryState) => ({ ...acc, ...queryState }),
      {},
    );
    return withState(queryStateSignals)(store);
  }) as SignalStoreFeature<Input, { state: State; computed: {}; methods: {} }>;
}

export function withQueries<
  Input extends SignalStoreFeatureResult,
  State extends object,
  InputMethods extends MethodsDictionary,
  OutputMethods extends MethodsDictionary,
>(
  queriesFactory: QueriesFactory<Input, InputMethods>,
): SignalStoreFeature<
  Input,
  { state: State; computed: {}; methods: OutputMethods }
> {
  const stateFeature = withQueriesState(queriesFactory);

  return signalStoreFeature(
    (store) => stateFeature(store), // This causes type-errors because the type of store does not match what `queriesFactory` expects apparently
    withMethods((store) => { // Will create the load-methods once I've figured out how to add the state properly
      return {};
    }),
  );
}

[rainerhahnekamp]

@PhilippMDoerner did you try to use withMethods directly in withQueries?

[PhilippMDoerner]

I assume you mean withQueriesState ? withMethods is just exemplary here in that this is a placeholder for where I'll eventually add the load methods, the sole problem right now is withQueriesState.

It pretty much does not matter where I move the invocation of either of those, be that inside of the signalStoreFeatures call or outside, the type error in the feature created by withQueriesState remains the same.

export function withQueries<
  Input extends SignalStoreFeatureResult,
  State extends object,
  InputMethods extends MethodsDictionary,
  OutputMethods extends MethodsDictionary,
>(
  queriesFactory: QueriesFactory<Input, InputMethods>,
): SignalStoreFeature<
  Input,
  { state: State; computed: {}; methods: OutputMethods }
> {
  return signalStoreFeature(
   store =>  withQueriesState(queriesFactory)(store) //Same type error,
    withMethods((store) => {
      return {};
    }),
  );
}

// alternatively
export function withQueries
...
{
  const stateFeature = withQueriesState(queriesFactory);
  const methodsFeature = withMethods((store) => {
    return {};
  });
  return signalStoreFeature(
    withQueriesState(queriesFactory),
    methodsFeature,
  );
}

[PhilippMDoerner]

Trying to get this to work is proving trickier than I thought. Out of curiosity, are there any other custom feature hooks that you're aware of that I could take a look at that function similarly to withMethods in that they use a factory-function ala store => object with properties ?

I keep getting the types wrong.

Edit: Maybe to elaborate: The complexity that stumps me is the fact that unlike withMethods I don't just want to transfer key-value pairs into a store, I want to take the keys, transform those keys into different keys and use those for property names.

I can do that as long as I have individual elements for which I want to generate fields (1 query).
Once the user passes in multiple inputs (an object with multiple queries or even a factory function) I'm getting somewhat stumped on how the types need to look in order to work and be correct.

Edit: This is as far as I've gotten anyway: https://tinyurl.com/mwrk2nbn