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

Upgrade query-string to v9 #9812

Merged
merged 5 commits into from
May 20, 2024
Merged

Upgrade query-string to v9 #9812

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
59bbdf5
Upgrade query-string to v9
MohammedFaragallah May 2, 2024
f013616
Merge remote-tracking branch 'upstream/next' into query-string
MohammedFaragallah May 2, 2024
d80f875
Fix: query-string jest configs
MohammedFaragallah May 2, 2024
4012480
Merge remote-tracking branch 'upstream/next' into query-string
MohammedFaragallah May 6, 2024
054b1c9
Merge branch 'next' into query-string
MohammedFaragallah May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/DataProviderWriting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -687,7 +687,7 @@ Here is an example implementation, that you can use as a base for your own Data

```js
import { fetchUtils } from 'react-admin';
import { stringify } from 'query-string';
Copy link
Member

Choose a reason for hiding this comment

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

Do we need to do that? I see no upgrade guide in query-string for that change.

Copy link

Choose a reason for hiding this comment

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

yeah, this package just export default now

import queryString from 'query-string';

const apiUrl = 'https://my.api.com/';
const httpClient = fetchUtils.fetchJson;
Expand All @@ -701,7 +701,7 @@ export default {
range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
filter: JSON.stringify(params.filter),
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;
const { json, headers } = await httpClient(url, { signal: params.signal });
return {
data: json,
Expand All @@ -719,7 +719,7 @@ export default {
const query = {
filter: JSON.stringify({ ids: params.ids }),
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;
const { json } = await httpClient(url, { signal: params.signal });
return { data: json };
},
Expand All @@ -735,7 +735,7 @@ export default {
[params.target]: params.id,
}),
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;
const { json, headers } = await httpClient(url, { signal: params.signal });
return {
data: json,
Expand Down Expand Up @@ -764,7 +764,7 @@ export default {
const query = {
filter: JSON.stringify({ id: params.ids}),
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;
const { json } = await httpClient(url, {
method: 'PUT',
body: JSON.stringify(params.data),
Expand All @@ -784,7 +784,7 @@ export default {
const query = {
filter: JSON.stringify({ id: params.ids}),
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;
const { json } = await httpClient(url, {
method: 'DELETE',
body: JSON.stringify(params.data),
Expand Down
4 changes: 2 additions & 2 deletions docs/ListTutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -700,15 +700,15 @@ For instance, if you have a list of posts ordered by publication date, and you w
```tsx
import Button from '@mui/material/Button';
import { Link } from 'react-router-dom';
import { stringify } from 'query-string';
import queryString from 'query-string';

const SortByViews = () => (
<Button
color="primary"
component={Link}
to={{
pathname: '/posts',
search: stringify({
search: queryString.stringify({
page: 1,
perPage: 25,
sort: 'nb_views',
Expand Down
12 changes: 6 additions & 6 deletions docs/Tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1029,7 +1029,7 @@ The code for a Data Provider for the `my.api.url` API is as follows:
```tsx
// in src/dataProvider.ts
import { DataProvider, fetchUtils } from "react-admin";
import { stringify } from "query-string";
import queryString from "query-string";

const apiUrl = 'https://my.api.com/';
const httpClient = fetchUtils.fetchJson;
Expand All @@ -1043,7 +1043,7 @@ export const dataProvider: DataProvider = {
range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
filter: JSON.stringify(params.filter),
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;

return httpClient(url).then(({ headers, json }) => ({
data: json,
Expand All @@ -1060,7 +1060,7 @@ export const dataProvider: DataProvider = {
const query = {
filter: JSON.stringify({ id: params.ids }),
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;
return httpClient(url).then(({ json }) => ({ data: json }));
},

Expand All @@ -1075,7 +1075,7 @@ export const dataProvider: DataProvider = {
[params.target]: params.id,
}),
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;

return httpClient(url).then(({ headers, json }) => ({
data: json,
Expand All @@ -1093,7 +1093,7 @@ export const dataProvider: DataProvider = {
const query = {
filter: JSON.stringify({ id: params.ids}),
};
return httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
return httpClient(`${apiUrl}/${resource}?${queryString.stringify(query)}`, {
method: 'PUT',
body: JSON.stringify(params.data),
}).then(({ json }) => ({ data: json }));
Expand All @@ -1116,7 +1116,7 @@ export const dataProvider: DataProvider = {
const query = {
filter: JSON.stringify({ id: params.ids}),
};
return httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
return httpClient(`${apiUrl}/${resource}?${queryString.stringify(query)}`, {
method: 'DELETE',
}).then(({ json }) => ({ data: json }));
}
Expand Down
2 changes: 1 addition & 1 deletion examples/demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"inflection": "^3.0.0",
"json-graphql-server": "~3.0.1",
"prop-types": "^15.8.1",
"query-string": "^7.1.1",
"query-string": "^9.0.0",
"ra-data-fakerest": "^5.0.0-alpha.0",
"ra-data-graphql": "^5.0.0-alpha.0",
"ra-data-graphql-simple": "^5.0.0-alpha.0",
Expand Down
4 changes: 2 additions & 2 deletions examples/demo/src/categories/LinkToRelatedProducts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import Button from '@mui/material/Button';
import { Link } from 'react-router-dom';
import { useTranslate, useRecordContext } from 'react-admin';
import { stringify } from 'query-string';
import queryString from 'query-string';

import products from '../products';
import { Category } from '../types';
Expand All @@ -18,7 +18,7 @@ const LinkToRelatedProducts = () => {
component={Link}
to={{
pathname: '/products',
search: stringify({
search: queryString.stringify({
filter: JSON.stringify({ category_id: record.id }),
}),
}}
Expand Down
4 changes: 2 additions & 2 deletions examples/demo/src/dashboard/PendingReviews.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
useIsDataLoaded,
} from 'react-admin';

import { stringify } from 'query-string';
import queryString from 'query-string';

import CardWithIcon from './CardWithIcon';
import StarRatingField from '../reviews/StarRatingField';
Expand Down Expand Up @@ -47,7 +47,7 @@ const PendingReviews = () => {
<CardWithIcon
to={{
pathname: '/reviews',
search: stringify({
search: queryString.stringify({
filter: JSON.stringify({ status: 'pending' }),
}),
}}
Expand Down
4 changes: 2 additions & 2 deletions examples/demo/src/segments/LinkToRelatedCustomers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import { Button } from '@mui/material';
import { Link } from 'react-router-dom';
import { useTranslate } from 'react-admin';
import { stringify } from 'query-string';
import queryString from 'query-string';

import visitors from '../visitors';

Expand All @@ -15,7 +15,7 @@ const LinkToRelatedCustomers = ({ segment }: { segment: string }) => {
component={Link}
to={{
pathname: '/customers',
search: stringify({
search: queryString.stringify({
filter: JSON.stringify({ groups: segment }),
}),
}}
Expand Down
2 changes: 1 addition & 1 deletion jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ module.exports = {
'/packages/create-react-admin/templates',
],
transformIgnorePatterns: [
'[/\\\\]node_modules[/\\\\](?!(@hookform)/).+\\.(js|jsx|mjs|ts|tsx)$',
'[/\\\\]node_modules[/\\\\](?!(@hookform|query-string|decode-uri-component|filter-obj|split-on-first)/).+\\.(js|jsx|mjs|ts|tsx)$',
Copy link
Member

Choose a reason for hiding this comment

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

does that mean that react-admin users will have to do the same in their jest configuration?

Copy link
Collaborator

Choose a reason for hiding this comment

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

No, this is specific to Jest

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 exactly my question

],
transform: {
// '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"jsonexport": "^3.2.0",
"lodash": "~4.17.5",
"prop-types": "^15.8.1",
"query-string": "^7.1.1",
"query-string": "^9.0.0",
"react-is": "^18.2.0"
},
"gitHead": "587df4c27bfcec4a756df4f95e5fc14728dfc0d7"
Expand Down
4 changes: 2 additions & 2 deletions packages/ra-core/src/controller/create/useCreateController.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useCallback } from 'react';
// @ts-ignore
import { parse } from 'query-string';
import queryString from 'query-string';
import { useLocation, Location } from 'react-router-dom';
import { UseMutationOptions } from '@tanstack/react-query';

Expand Down Expand Up @@ -232,7 +232,7 @@ export const getRecordFromLocation = ({ state, search }: Location) => {
}
if (search) {
try {
const searchParams = parse(search);
const searchParams = queryString.parse(search);
if (searchParams.source) {
if (Array.isArray(searchParams.source)) {
console.error(
Expand Down
14 changes: 7 additions & 7 deletions packages/ra-core/src/controller/list/useListParams.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import expect from 'expect';
import { render, screen } from '@testing-library/react';
import { stringify } from 'query-string';
import queryString from 'query-string';
import { fireEvent, waitFor } from '@testing-library/react';
import { CoreAdminContext } from '../../core';

Expand Down Expand Up @@ -217,7 +217,7 @@ describe('useListParams', () => {
pathname: '/',
search:
'?' +
stringify({
queryString.stringify({
displayedFilters: JSON.stringify({ foo: true }),
filter: JSON.stringify({ foo: 'bar' }),
sort: 'id',
Expand Down Expand Up @@ -258,7 +258,7 @@ describe('useListParams', () => {
pathname: '/',
search:
'?' +
stringify({
queryString.stringify({
displayedFilters: JSON.stringify({ foo: true }),
filter: JSON.stringify({ foo: 'bar' }),
sort: 'id',
Expand Down Expand Up @@ -300,7 +300,7 @@ describe('useListParams', () => {
pathname: '/',
search:
'?' +
stringify({
queryString.stringify({
displayedFilters: JSON.stringify({
'foo.bar': true,
}),
Expand Down Expand Up @@ -344,7 +344,7 @@ describe('useListParams', () => {
pathname: '/',
search:
'?' +
stringify({
queryString.stringify({
displayedFilters: JSON.stringify({
'foo.bar': true,
}),
Expand Down Expand Up @@ -409,7 +409,7 @@ describe('useListParams', () => {
pathname: '/',
search:
'?' +
stringify({
queryString.stringify({
filter: JSON.stringify({}),
sort: 'id',
order: 'ASC',
Expand Down Expand Up @@ -462,7 +462,7 @@ describe('useListParams', () => {
pathname: '/',
search:
'?' +
stringify({
queryString.stringify({
filter: JSON.stringify({}),
sort: 'id',
order: 'ASC',
Expand Down
6 changes: 3 additions & 3 deletions packages/ra-core/src/controller/list/useListParams.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useCallback, useMemo, useEffect, useState, useRef } from 'react';
import { parse, stringify } from 'query-string';
import queryString from 'query-string';
import lodashDebounce from 'lodash/debounce';
import pickBy from 'lodash/pickBy';
import { useNavigate, useLocation } from 'react-router-dom';
Expand Down Expand Up @@ -167,7 +167,7 @@ export const useListParams = ({
// the useEffect above will apply the changes to the params in the store
navigate(
{
search: `?${stringify({
search: `?${queryString.stringify({
...tempParams.current,
filter: JSON.stringify(
tempParams.current.filter
Expand Down Expand Up @@ -304,7 +304,7 @@ const parseObject = (query, field) => {

export const parseQueryFromLocation = ({ search }): Partial<ListParams> => {
const query = pickBy(
parse(search),
queryString.parse(search),
(v, k) => validQueryParams.indexOf(k) !== -1
);
parseObject(query, 'filter');
Expand Down
4 changes: 2 additions & 2 deletions packages/ra-core/src/dataProvider/fetch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import HttpError from './HttpError';
import { stringify } from 'query-string';
import queryString from 'query-string';

export interface Options extends RequestInit {
user?: {
Expand Down Expand Up @@ -79,7 +79,7 @@ export const fetchJson = (url, options: Options = {}) => {
});
};

export const queryParameters = stringify;
export const queryParameters = queryString.stringify;

const isValidObject = value => {
if (!value) {
Expand Down
4 changes: 2 additions & 2 deletions packages/ra-data-json-server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"watch": "tsc --outDir dist/esm --module es2015 --watch"
},
"dependencies": {
"query-string": "^7.1.1",
"query-string": "^9.0.0",
"ra-core": "^5.0.0-beta.0"
},
"devDependencies": {
Expand All @@ -34,4 +34,4 @@
"typescript": "^5.1.3"
},
"gitHead": "587df4c27bfcec4a756df4f95e5fc14728dfc0d7"
}
}
8 changes: 4 additions & 4 deletions packages/ra-data-json-server/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { stringify } from 'query-string';
import queryString from 'query-string';
import { fetchUtils, DataProvider } from 'ra-core';

/**
Expand Down Expand Up @@ -44,7 +44,7 @@ export default (apiUrl, httpClient = fetchUtils.fetchJson): DataProvider => ({
_start: (page - 1) * perPage,
_end: page * perPage,
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;

return httpClient(url, { signal: params?.signal }).then(
({ headers, json }) => {
Expand Down Expand Up @@ -75,7 +75,7 @@ export default (apiUrl, httpClient = fetchUtils.fetchJson): DataProvider => ({
const query = {
id: params.ids,
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;
return httpClient(url, { signal: params?.signal }).then(({ json }) => ({
data: json,
}));
Expand All @@ -92,7 +92,7 @@ export default (apiUrl, httpClient = fetchUtils.fetchJson): DataProvider => ({
_start: (page - 1) * perPage,
_end: page * perPage,
};
const url = `${apiUrl}/${resource}?${stringify(query)}`;
const url = `${apiUrl}/${resource}?${queryString.stringify(query)}`;

return httpClient(url, { signal: params?.signal }).then(
({ headers, json }) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-data-simple-rest/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"watch": "tsc --outDir dist/esm --module es2015 --watch"
},
"dependencies": {
"query-string": "^7.1.1"
"query-string": "^9.0.0"
},
"devDependencies": {
"cross-env": "^5.2.0",
Expand Down
Loading
Loading