Giter VIP home page Giter VIP logo

Comments (6)

NetanelBasal avatar NetanelBasal commented on May 26, 2024 2

Done

from query.

Den-dp avatar Den-dp commented on May 26, 2024 1

After a brief investigation, I started to think that this might be solved by changing f.e. this:

export const QueryClient = new InjectionToken<QueryCore>('QueryClient', {
providedIn: 'root',
factory() {
const options = inject(QUERY_CLIENT_OPTIONS);
return new QueryCore({
...options,
defaultOptions: {
...options?.defaultOptions,
queries: {
staleTime: Infinity,
...options?.defaultOptions?.queries,
},
},
});
},
});

in the following way:

@Injectable({
  provideIn: 'root'
})
export class QueryClient extends QueryCore {
  private options = inject(QUERY_CLIENT_OPTIONS);

  constructor() {
    super({
      ...this.options,
      defaultOptions: {
        ...this.options?.defaultOptions,
        queries: {
          staleTime: Infinity,
          ...this.options?.defaultOptions?.queries,
        },
      },
    });
  }
}

Haven't tested it tho, the electricity in my city went off

from query.

NetanelBasal avatar NetanelBasal commented on May 26, 2024 1

We can expose the class providers. The issue is naming.

from query.

NetanelBasal avatar NetanelBasal commented on May 26, 2024 1

This is my suggestion - https://github.com/ngneat/query/pull/51/files

from query.

tieppt avatar tieppt commented on May 26, 2024

Because QueryClient is an InjectorToken, so you can use this one:

type UnwrapInjectionToken<TypeInjectionToken extends InjectionToken<unknown>> =
  TypeInjectionToken extends InjectionToken<infer Wrapped> ? Wrapped : unknown;

@Injectable({
  providedIn: 'root',
})
export class TodosService {
  // private http = inject(HttpClient);
  // private queryClient = inject(QueryClient);
  // private useQuery = inject(QueryProvider);
  // private useMutation = inject(MutationProvider);
  constructor(
    private http: HttpClient,
    @Inject(QueryClient)
    private queryClient: UnwrapInjectionToken<typeof QueryClient>,
    @Inject(QueryProvider)
    private useQuery: UnwrapInjectionToken<typeof QueryProvider>,
    @Inject(MutationProvider)
    private useMutation: UnwrapInjectionToken<typeof MutationProvider>
  ) {}

  getTodos() {
    return this.useQuery(['todos'], () => {
      return this.http.get<Todo[]>(
        'https://jsonplaceholder.typicode.com/todos'
      );
    });
  }

  addTodoOriginal() {
    return this.useMutation(({ title }: { title: string }) => {
      return this.http
        .post<Todo>(`https://jsonplaceholder.typicode.com/todos`, { title })
        .pipe(
          tap(() => {
            this.queryClient.invalidateQueries(['todos']);
          })
        );
    });
  }

  addTodoBuiltIn({ title }: { title: string }) {
    return this.http
      .post<Todo>(`https://jsonplaceholder.typicode.com/todos`, { title })
      .pipe(
        tap(() => {
          this.queryClient.invalidateQueries(['todos']);
        })
      );
  }

  getTodo(id: number) {
    return this.useQuery(['todo', id], () => {
      return this.http
        .get<Todo>(`https://jsonplaceholder.typicode.com/todos/${id}`)
        .pipe(delay(1000));
    });
  }
}

from query.

Den-dp avatar Den-dp commented on May 26, 2024

My misunderstanding was more about "why InjectionToken is used here?" and "why it can't be implemented a class?".

Now I realize that while QueryClient can be rewritten as an injectable class, but MutationProvider, IsFetchingProvider, IsMutatingProvider, PersistedQueryProvider, InfiniteQueryProvider - can not.

The reason for this is DX that this library tries to achieve.

MutationProvider, IsFetchingProvider, IsMutatingProvider, PersistedQueryProvider, InfiniteQueryProvider are meant to be used as function calls: useMutation(), useIsFetching(), useIsMutating(), usePersistedQuery(), useInfiniteQuery(). So, to provide a function-like experience they can't be implemented in other than InjectionToken way (classes aren't callable).

QueryClient is already a class so my code above might work without breaking the initial DX.


Overall, I'd like to see this library allowing the best DI experience for both worlds 🙌:
✔️ shiny new inject() based
🚫 safely typed constructor-based (so without @Inject() stuff and manual typing)

from query.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.