Skip to content

docs(migrating): fix example for response composition#1483

Merged
kettanaito merged 2 commits into
mswjs:feat/standard-apifrom
christoph-fricke:fix-migration-example
Dec 2, 2022
Merged

docs(migrating): fix example for response composition#1483
kettanaito merged 2 commits into
mswjs:feat/standard-apifrom
christoph-fricke:fix-migration-example

Conversation

@christoph-fricke

Copy link
Copy Markdown
Contributor

I noticed that the example for augmenting responses won't work as shown in the migration guide. Therefore, I fixed it to work with either Response or StrictResponse and augmenting an existing response, which is passed into the function in the next code snippet.

Using this approach in a project, I noticed that augmentResponse<R extends Response>() does not use the imported Response since it is a value and not a type. Is the important even necessary for some environments in this case? Otherwise, we might as well remove it from the example.

@codesandbox-ci

codesandbox-ci Bot commented Nov 29, 2022

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6b8edfe:

Sandbox Source
MSW React Configuration

Comment thread MIGRATING.md Outdated
Comment thread MIGRATING.md Outdated
As this release removes the concept of response composition via `res()`, you can no longer compose context utilities or abstract their partial composed state to a helper function.

Instead, you can abstract a common response logic into a plain function and always returns a `Response` instance.
Instead, you can abstract a common response logic into a plain function that always returns a `Response` instance.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Instead, you can abstract a common response logic into a plain function that always returns a `Response` instance.
Instead, you can abstract a common response logic into a plain function that modifies any given `Response`.

I wonder if this statement stands true in all scenarios. Are there cases when you cannot modify a Response instance after its creation?

For example, you cannot modify an existing response's status or statusText. It doesn't throw but neither does it apply the change:

let r = new Response(null, { status: 301 })

r.status = 200
console.log(r.status) // 301

I'm quite sure you cannot change the response body either this way. It makes me thinking about the practicality of the augmentResponse function.

Perhaps we should illustrate a custom response generator function based on the input:

function serviceResponse(json) {
  const response = HttpResponse.json(json, {
    // Come up with some reusable defaults here. 
  })
  return response
}

What do you think about this?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kettanaito I did not know about this, but it can be a valid point for some properties.

I guess the approach to these reusable helper functions highly depends on the use case and their goal. For example, I needed a helper that enriches any kind of response with an auth token stored in a cookie. So my preferred implementation has been to accept a response and not construct one:

function withAuthToken<R extends Response>(token: Token, response: R): R {
  response.headers.set('Set-Cookie', `${authCookieKey}=${JSON.stringify(token)}; HttpOnly;`);
  return response;
}

Other use-cases may be better covered by an implementation similar to your suggestion. Maybe the section should mainly focus on conveying the spirit of these helpers and show examples for a "response creator/factory" and "response enhancer".

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may be getting a bit ahead of ourselves with this one. The purpose of this guide is only to help people migrate existing custom response composition use cases to the new API. I think I failed to mention that these are not the new docs, so being too specific in the migration guide only hurts us.

That being said, if I were to choose I'd go with the path of the less possible error and that being to create a response in the custom utility function. Because modifying an accepted response may give people a false impression that they can modify any response property, which is not true.

You are right that there can be as many custom functions like this one as there are use cases. We can pick one, and even with that the point will be to target people who already have a custom logic like this and show them that now there's no response exports from MSW and you should create/operate with Response instances. I believe the response generator example works fine for that.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kettanaito I tried to compile our discussion into concise changed for the example. What do you think about the new suggestion?

@kettanaito kettanaito left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simply beautiful! Thank you.

@kettanaito kettanaito merged commit 4bea835 into mswjs:feat/standard-api Dec 2, 2022
@kettanaito

Copy link
Copy Markdown
Member

If you find any other misleading parts of the migration guide, please let me know! I know I could use your input on those.

@christoph-fricke christoph-fricke deleted the fix-migration-example branch December 2, 2022 14:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants