-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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
feat: @tanstack/react-query 설정 추가 및 예시 쿼리 추가 #7
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,15 +3,16 @@ | |
"private": true, | ||
"version": "0.0.0", | ||
"type": "module", | ||
"main": "src/index.tsx", | ||
"types": "src/index.tsx", | ||
"main": "src/index.ts", | ||
"types": "src/index.ts", | ||
"scripts": { | ||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0" | ||
}, | ||
"dependencies": { | ||
"@lukemorales/query-key-factory": "^1.3.2", | ||
"@tanstack/react-query": "^5.17.15", | ||
"@tanstack/react-query-devtools": "^5.17.18", | ||
"@tanstack/query-core": "^4.32.6", | ||
"@tanstack/react-query": "^4.32.6", | ||
"@tanstack/react-query-devtools": "^4.32.6", | ||
Comment on lines
+13
to
+15
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. v5를 써도 괜찮긴하지만, There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @lukemorales/query-key-factory 도 안 써봐서 알아봐야겠다 ㅇㅋㅇㅋ |
||
"ky": "^1.2.0", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0" | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,13 @@ | ||
import { QueryClientProvider as BaseQueryClientProvider, QueryClient } from '@tanstack/react-query'; | ||
import { useState } from 'react'; | ||
export { ReactQueryDevtools } from '@tanstack/react-query-devtools'; | ||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; | ||
|
||
export function QueryClientProvider({ children }: React.PropsWithChildren) { | ||
const [queryClient] = useState(() => new QueryClient()); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 아직 기본 설정값은 따로 넣지는 않음 |
||
return <BaseQueryClientProvider client={queryClient}>{children}</BaseQueryClientProvider>; | ||
} | ||
|
||
export function Hello() { | ||
return 'World'; | ||
return ( | ||
<BaseQueryClientProvider client={queryClient}> | ||
{children} | ||
<ReactQueryDevtools /> | ||
</BaseQueryClientProvider> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import ky, { Options, ResponsePromise } from 'ky'; | ||
|
||
// TODO 환경 변수로 API 베이스 설정 | ||
const API_URL = ''; | ||
|
||
export const instance = ky.create({ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. axios가 아닌 fetch기반 ky 사용 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 요건 처음 보네 ㅇㅋㅇㅋ |
||
prefixUrl: API_URL, | ||
headers: { | ||
'content-type': 'application/json', | ||
}, | ||
hooks: { | ||
// TODO 인증 관련 헤더 검증 로직 추가 | ||
beforeRequest: [], | ||
// TODO 서버 에러 처리 | ||
beforeError: [], | ||
}, | ||
}); | ||
|
||
export async function resultify<T>(response: ResponsePromise) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 보일러플레이트처럼 |
||
try { | ||
// TODO 바디가 없는 경우 어떻게 할지 논의 필요 | ||
return await response.json<T>(); | ||
} catch (e) { | ||
console.error('[fetcher.ts] resultify에서 JSON 파싱을 하는 도중 오류 발생'); | ||
throw e; | ||
} | ||
} | ||
|
||
export const fetcher = { | ||
get: <T>(pathname: string, options?: Options) => resultify<T>(ky.get(pathname, options)), | ||
post: <T>(pathname: string, options?: Options) => resultify<T>(ky.post(pathname, options)), | ||
put: <T>(pathname: string, options?: Options) => resultify<T>(ky.put(pathname, options)), | ||
delete: <T>(pathname: string, options?: Options) => resultify<T>(ky.delete(pathname, options)), | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export { useHelloQuery } from './useHelloQuery'; | ||
export { QueryClientProvider } from './QueryClientProvider'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { createQueryKeys } from '@lukemorales/query-key-factory'; | ||
import { fetcher } from './fetcher'; | ||
|
||
export interface Hello { | ||
hello: string; | ||
} | ||
|
||
export const queryKey = createQueryKeys('boolti', { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 도메인 별로 쿼리키 분리하면 될 듯 |
||
hello: { | ||
queryKey: null, | ||
queryFn: () => fetcher.get<Hello>('/hello'), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 파일 분리를 어떤식으로 작업하는 것을 선호하는지 모르겠지만, 원하는 스타일 있으면 따라가도록 하겠음! |
||
}, | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { useQuery } from '@tanstack/react-query'; | ||
import { queryKey } from './queryKey'; | ||
import { TypedUseQueryOptions } from '@lukemorales/query-key-factory'; | ||
|
||
export function useHelloQuery(options?: TypedUseQueryOptions<typeof queryKey.hello>) { | ||
return useQuery({ | ||
...options, | ||
...queryKey.hello, | ||
}); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
예시용 코드