-
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
Conversation
"@tanstack/query-core": "^4.32.6", | ||
"@tanstack/react-query": "^4.32.6", | ||
"@tanstack/react-query-devtools": "^4.32.6", |
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.
v5를 써도 괜찮긴하지만, @lukemorales/query-key-factory
를 사용할 수 없음.
유틸 함수를 만들어야하는 불편함이 좀 있을 수 있는 것 같아서 일단 v4 설치함
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.
@lukemorales/query-key-factory 도 안 써봐서 알아봐야겠다 ㅇㅋㅇㅋ
@@ -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 comment
The reason will be displayed to describe this comment to others. Learn more.
아직 기본 설정값은 따로 넣지는 않음
// TODO 환경 변수로 API 베이스 설정 | ||
const API_URL = ''; | ||
|
||
export const instance = ky.create({ |
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.
axios가 아닌 fetch기반 ky 사용
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.
요건 처음 보네 ㅇㅋㅇㅋ
}, | ||
}); | ||
|
||
export async function resultify<T>(response: ResponsePromise) { |
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.
보일러플레이트처럼 .json()
호출부가 많을 것 같아 만든 함수
hello: string; | ||
} | ||
|
||
export const queryKey = createQueryKeys('boolti', { |
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.
도메인 별로 쿼리키 분리하면 될 듯
export const queryKey = createQueryKeys('boolti', { | ||
hello: { | ||
queryKey: null, | ||
queryFn: () => fetcher.get<Hello>('/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.
파일 분리를 어떤식으로 작업하는 것을 선호하는지 모르겠지만, 원하는 스타일 있으면 따라가도록 하겠음!
// const { data } = useHelloQuery(); | ||
// console.log(data?.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.
예시용 코드
445b3c5
to
80cf773
Compare
✅ Deploy Preview for startling-speculoos-2f9e08 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for extraordinary-piroshki-6a1049 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for loquacious-yeot-37fd34 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
No description provided.