Gathering detailed insights and metrics for sync-query
@tanstack/query-sync-storage-persister
A persister for synchronous storages, to be used with TanStack/Query
redux-query-sync
Synchronise URL query parameters and redux state.
use-query-sync-data
A composition API that sync url query to data base on Vue3.
mysql-sync-query
Extends the mysql package to support executing queries synchronously.
npm install sync-queryTypescript
Module System
Node Version
NPM Version
78.4
Supply Chain
99.2
Quality
75.9
Maintenance
100
Vulnerability
100
License
TypeScript (93.67%)
JavaScript (6.33%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
3,894
Last Day
1
Last Week
17
Last Month
71
Last Year
432
6 Stars
47 Commits
2 Watching
27 Branches
1 Contributors
Minified
Minified + Gzipped
Latest Version
0.2.13
Package Id
sync-query@0.2.13
Unpacked Size
7.77 MB
Size
6.12 MB
File Count
53
NPM Version
6.13.4
Node Version
12.14.0
Cumulative downloads
Total Downloads
Last day
0%
1
Compared to previous day
Last week
21.4%
17
Compared to previous week
Last month
173.1%
71
Compared to previous month
Last year
6.4%
432
Compared to previous year
❄️
使用 React 高阶组件，实现将 React state 存储在 URL query
^_^ 这是一个在 antd-design 里使用该库的实例
只需要 3 行代码！
1// import 2import { syncQueryHOC } from "sync-query"; 3// use syncQueryHOC 4const MyComponentEnhance = syncQueryHOC(MyComponent, ['searchInput', 'pagination'], 'fetch'); 5<MyComponentEnhance></MyComponentEnhance> 6//...
一旦我们这样做了，就拥有了下面使用的功能。
yarn add sync-query
npm i --save sync-query
1import { SyncQueryFactory, syncQueryCb } from "sync-query"; 2 3@SyncQueryFactory(['searchInput', 'pagination']) // 监听到 searchInput 或 pagination 变化时同步到 URL query 4export class MyComponent extends Component { 5 this.state = { 6 searchInput: 'hello world', 7 pagination: { 8 }, 9 } 10 @syncQueryCb(['searchInput']) // 监听到 searchInput 变化时调用 fetch 函数 11 fetch() { 12 // network fetch... 13 } 14}
1import { syncQueryHOC } from "sync-query"; 2 3export class MyComponent extends Component { 4 fetch() { 5 // network fetch... 6 } 7} 8 9export const MyComponentEnhance = 10 syncQueryHOC( 11 MyComponent, 12 ['searchInput', 'pagination'], // 监听到 searchInput 或 pagination 变化时同步到 URL query 13 'fetch', 14 { 15 callbackDeps: ['searchInput'], // 监听到 searchInput 变化时调用 fetch 函数 16 wait: 600, // 函数防抖，600ms 17 } 18 );
注意: SyncQueryFactory 装饰器工厂 和 syncQueryHOC 要放在离 MyComponent 最近的位置
该库会自动存储 state 到 url query，同时触发 callback 函数
关闭的方法是，在类装饰器配置中增加 disableAutoSync
手动同步的方法是 (this as SyncQueryHost).triggerSync),
triggerSync 该方法的调用，会同步state到路由参数
示例代码如下：
1@SyncQueryFactory( 2 ['pagination', 'searchInput'], 3 null, 4 { 5 disableAutoSync: true 6 } 7) 8class MyComponent extends Component { 9 onHandlePageChange(current) { 10 this.setState( 11 { 12 pagination: { 13 ...this.state.pagination, 14 current, 15 }, 16 }, 17 this.fetchTable 18 ); 19 } 20 fetchTable() { 21 (this as any).triggerSync(); 22 // fetch network... 23 } 24}
注意： (this as any).triggerSync() 要在 componentDidMount 和之后的声明周期才被初始化。
接收一个 React 组件，返回带有同步 state 到路由参数功能的组件
syncQueryHOC(WrappedComponent, stateList: string[], callbackName?:string, config?:SyncQueryConfig): EnhanceComponent
1type SyncQueryConfig = { 2 wait: number, // 函数防抖的等待时间， 单位 ms 3 callbackDeps?: string[], // callbackDeps 存放 state key 的数组，监听到 state 中对应key 的 value 变化时，会调用 callback（网络请求等） 4 // callbackDeps 没有传入时，默认监听的内容等于 stateList 5 parser?: IQueryParser, // 解析器：用于将路由参数 query 解析到 state，默认是 JSON.parse 6 stringify?: IQueryStringify, // 生成器：用于生成 state 对应的 query 字符串，默认是 JSON.stringify 7}
SyncQueryFactory 装饰器工厂， 在 typescript 中使用
SyncQueryFactory(stateList: string[], callbackName?:string, config?:SyncQueryConfig)
注意 类装饰器工厂 SyncQueryFactory 和 方法装饰器 syncQueryCb 可以配合使用， 高阶组件 syncQueryHOC 与前两者尽量避免共用。
1type SyncQueryConfig = { 2 wait: number, // 函数防抖的等待时间， 单位 ms 3 callbackDeps?: string[], // callbackDeps 存放 state key 的数组，监听到 state 中对应key 的 value 变化时，会调用 callback（网络请求等） 4 // callbackDeps 没有传入时，默认监听的内容等于 stateList 5 parser?: IQueryParser, // 解析器：用于将路由参数 query 解析到 state，默认是 JSON.parse 6 stringify?: IQueryStringify, // 生成器：用于生成 state 对应的 query 字符串，默认是 JSON.stringify 7}
代码实现如下：
1function SyncQueryFactory(stateList: string[], callbackName?:string, config?:SyncQueryConfig) { 2 return function(WrappedComponent) { 3 return syncQueryHOC(WrappedComponent, stateList, callbackName, config); 4 } 5}
syncQueryCb 方法装饰器，与 SyncQueryFactory 配合使用
syncQueryCb(callbackDeps?:string[])
使用示例：
1import { SyncQueryFactory, syncQueryCb } from "sync-query"; 2 3@SyncQueryFactory(['searchInput', 'pagination']) // 监听到 searchInput 或 pagination 变化时同步到 URL query 4export class MyComponent extends Component { 5 6 @syncQueryCb(['searchInput']) // 监听到 searchInput 变化时调用 fetch 函数 7 fetch() { 8 // network fetch... 9 } 10}
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
97 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-02-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More