Capable of being assigned to a particular type, although it may also be utilized with an

Question

Capable of being assigned to a particular type, although it may also be utilized with an

I'm aiming to enhance an MSW resolver by applying response composition and creating a new resolver.

import {
  ResponseResolver,
  context,
  createResponseComposition,
  response
} from "msw";

export const createDelayedComposer = <
  M extends ResponseResolver<any, any, any>
>(
  milliseconds: number
) => {
  const delayed = createResponseComposition(undefined, [
    context.delay(milliseconds)
  ]);
  return (resolver: M): M => (req, _, ctx) =>
    resolver(req, Object.assign(delayed, response), ctx);
};

Encountering the following error:

Type '(req: any, _: ResponseComposition<any>, ctx: any) => AsyncResponseResolverReturnType<MockedResponse<any>>' is not assignable to type 'M'.
  '(req: any, _: ResponseComposition<any>, ctx: any) => AsyncResponseResolverReturnType<MockedResponse<any>>' is assignable to the constraint of type 'M', but 'M' could be instantiated with a different subtype of constraint 'ResponseResolver<any, any, any>'.ts(2322)

CodeSandbox

I've looked into similar solutions but I'm having trouble understanding my mistake. Can anyone identify what's wrong with my signature, and suggest a fix?

Alternatively, perhaps there's another approach to achieve the objective of enhancing the resolver function

typescript msw

Answer 1

Answer №1

I believe that the call signature you are using is being unnecessarily complicated.

In Summary

import { createResponseComposition, context } from 'msw'

export function customizedResponse() {
  
}

export const customizedResponse = createResponseComposition(undefined, [
  context.delay(500)
])

import { customizedResponse } from './customizedResponse'

export const handlers = [
  rest.get('/resource', (req, res, ctx) => {
    return customizedResponse(ctx.text('Hello world'))
  })
]

It's important to understand that custom response composition serves to streamline repetitive actions. Your current code suggests that the delay duration may vary dynamically, making a custom response composition unnecessary. Instead, utilizing ctx.delay() on an individual response basis would be more efficient:

rest.get('/resource', (req, res, ctx) => {
  return res(ctx.delay(500), ctx.text('One'))
}),
rest.post('/login', (req, res, ctx) => {
  return res(ctx.delay(250), ctx.text('One'))
})

Answer 2

I believe that the call signature you are using is being unnecessarily complicated.

In Summary

import { createResponseComposition, context } from 'msw'

export function customizedResponse() {
  
}

export const customizedResponse = createResponseComposition(undefined, [
  context.delay(500)
])

import { customizedResponse } from './customizedResponse'

export const handlers = [
  rest.get('/resource', (req, res, ctx) => {
    return customizedResponse(ctx.text('Hello world'))
  })
]

It's important to understand that custom response composition serves to streamline repetitive actions. Your current code suggests that the delay duration may vary dynamically, making a custom response composition unnecessary. Instead, utilizing ctx.delay() on an individual response basis would be more efficient:

rest.get('/resource', (req, res, ctx) => {
  return res(ctx.delay(500), ctx.text('One'))
}),
rest.post('/login', (req, res, ctx) => {
  return res(ctx.delay(250), ctx.text('One'))
})

Capable of being assigned to a particular type, although it may also be utilized with an

Answer №1

In Summary

Similar questions

What is the appropriate Typescript return type to use for a $http request that only returns a successful response with no content?

The module "jquery" in jspm, jQuery, TypeScript does not have a default export

Take a look at the browser's view

Best practices for implementing dual ngFor directives within a single tr element?

Angular6 - accessing elements that are not visible on the page

Fairly intricate React function component declaration with TypeScript

Build a Node.js application using TypeScript and all necessary dependencies

Mastering the art of chaining HTTP requests with RxJS for optimal results

Creating reducers for a unique data type: A step-by-step guide

Encountering an error while attempting to modify the state of an array of objects in a React Typescript

Organize data by month and year using Underscore.js groupBy method

Adding a timestamp or hash as a request parameter for css or js files in the NextJS 12 build file can be accomplished by simply including "?ts=[timestamp]" in the file

Utilizing TypeScript to define the parameter of a method within a generic interface by extracting a value from the generic type

Having trouble establishing a connection with mongoose and typescript

Utilize NestJS to consume EventPattern exclusively when the header variable matches a specific value

Error encountered while using TypeScript in the React Context Provider

Fire the BehaviorSubject with the identical value following a mutation

unable to locate the nested routes in the folder for remix

Patience is key as you await the completion of an API call in Angular 14

Deciphering the SessionProvider error: When "useSession" isn't recognized as a function