Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ensures there is no unexpected slash in url before query params #2470

Merged
merged 2 commits into from Aug 19, 2022
Merged

Ensures there is no unexpected slash in url before query params #2470

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bebb42
Ensures there is no unexpected slash in url before query params
ygrishajev Jul 1, 2022
1883498
refactor tests a bit
phryneas Aug 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/toolkit/src/query/tests/utils.test.ts
View file
Open in desktop
Expand Up @@ -83,6 +83,12 @@ describe('joinUrls', () => {

expect(joinUrls('', '/banana')).toBe('/banana')
expect(joinUrls('', 'banana')).toBe('banana')

expect(joinUrls('/api', '?a=1')).toBe('/api?a=1')
expect(joinUrls('/api/', '?a=1')).toBe('/api/?a=1')

expect(joinUrls('/api', 'banana?a=1')).toBe('/api/banana?a=1')
expect(joinUrls('/api/', 'banana/?a=1')).toBe('/api/banana/?a=1')
})

test('correctly joins variations of absolute urls', () => {
Expand Down
3 changes: 2 additions & 1 deletion packages/toolkit/src/query/utils/joinUrls.ts
View file
Open in desktop
Expand Up @@ -18,8 +18,9 @@ export function joinUrls(
return url
}

const delimiter = base.endsWith('/') || !url.startsWith('?') ? '/' : ''
Copy link

Choose a reason for hiding this comment

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

Can we refactor this so it also handle cases where the base ends with @?

Example 1:

const delimeter = (base.endsWith('?') || base.endsWith('@')) ? '' : '/'

Example 2

let delimeter = '/'
if (base.endsWith('?') || base.endsWith('@')) {
  delimeter = ''
}

Copy link
Member

Choose a reason for hiding this comment

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

This is still meant to work for normal http-style urls. If we added a myriad of symbols here, it would just become weirder and weirder. Do you maybe use too much of a string for the baseUrl? Usually you would already cut that off at the domain.

Copy link

Choose a reason for hiding this comment

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

This is still meant to work for normal http-style urls. If we added a myriad of symbols here, it would just become weirder and weirder. Do you maybe use too much of a string for the baseUrl? Usually you would already cut that off at the domain.

It's an external endpoint I'm using which I have no power of, unfortunately.
I have to append a dynamic value after @ and that's the reason the current solution doesn't work for my particular case.

I can make a workaround by hardcoding a random value - but that is not a long-term solution.

Copy link
Member

Choose a reason for hiding this comment

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

Assume this is your url:

https://example.org/some/sub/path@foo

Then in your case, you would have to use a baseUrl of https://example.org/some/sub and have every endpoint be declared as path@foo, path@bar etc.

Copy link

Choose a reason for hiding this comment

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

That is another "hack" you can do, but still not a robust solution.

Assume this is your url:

https://example.org/some/sub/path@foo

Then in your case, you would have to use a baseUrl of https://example.org/some/sub and have every endpoint be declared as path@foo, path@bar etc.

path is and will always be a base-url, and not an endpoint. I do have to append on every endpoint which is nothing but code duplication.

This is why I think redux-toolkit should handle this scenario.

Copy link
Member

@phryneas phryneas Aug 19, 2022 •
edited

Choose a reason for hiding this comment

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

Urls in the internet don't work like that. Joining urls or paths doesn't work like that. The path separator for urls is /.
If we add that @ here, it will cause bugs for others because it is not part of any standard. And five minutes down the road we will add even more symbols and cause even more bugs for even more people.

You won't get around adding that yourself or writing a helper for yourself - this is a non-standard scenario and we cannot support it.

Copy link

Choose a reason for hiding this comment

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

...five minutes down the road we will add even more symbols and cause even more bugs for even more people.

That's why I suggest having an optional method (or something) to customise the url based on the users need. That would solve everything now and later on.

Copy link
Member

Choose a reason for hiding this comment

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

You can just handle that in a custom baseQuery:

const myCustomBase = 'http://foo.bar/asd@
const defaultBq = fetchBaseQuery({})
const myBaseQuery = (arg, ...rest) => {
  const newArg = typeof arg == 'string' ? myCustomBase + arg : { ...arg, url: myCustomBase+arg.url }
  return defaultBq(newArg, ...rest)
}

base = withoutTrailingSlash(base)
url = withoutLeadingSlash(url)

return `${base}/${url}`
return `${base}${delimiter}${url}`;
}