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.

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

Merged
merged 5 commits into from
Jan 21, 2024

Conversation

alstn2468
Copy link
Member

No description provided.

@alstn2468 alstn2468 self-assigned this Jan 19, 2024
Comment on lines +10 to +12
"@tanstack/query-core": "^4.32.6",
"@tanstack/react-query": "^4.32.6",
"@tanstack/react-query-devtools": "^4.32.6",
Copy link
Member Author

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 설치함

Copy link
Member

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());
Copy link
Member Author

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({
Copy link
Member Author

Choose a reason for hiding this comment

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

axios가 아닌 fetch기반 ky 사용

https://github.com/sindresorhus/ky

Copy link
Member

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) {
Copy link
Member Author

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', {
Copy link
Member Author

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'),
Copy link
Member Author

Choose a reason for hiding this comment

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

파일 분리를 어떤식으로 작업하는 것을 선호하는지 모르겠지만, 원하는 스타일 있으면 따라가도록 하겠음!

Comment on lines +4 to +5
// const { data } = useHelloQuery();
// console.log(data?.hello)
Copy link
Member Author

Choose a reason for hiding this comment

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

예시용 코드

Copy link

netlify bot commented Jan 19, 2024

Deploy Preview for startling-speculoos-2f9e08 ready!

Name Link
🔨 Latest commit 3194acb
🔍 Latest deploy log https://app.netlify.com/sites/startling-speculoos-2f9e08/deploys/65aa9198246d8b0007da7bc0
😎 Deploy Preview https://deploy-preview-7--startling-speculoos-2f9e08.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Jan 19, 2024

Deploy Preview for extraordinary-piroshki-6a1049 ready!

Name Link
🔨 Latest commit 3194acb
🔍 Latest deploy log https://app.netlify.com/sites/extraordinary-piroshki-6a1049/deploys/65aa9198e5c3a800082ff523
😎 Deploy Preview https://deploy-preview-7--extraordinary-piroshki-6a1049.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Jan 19, 2024

Deploy Preview for loquacious-yeot-37fd34 ready!

Name Link
🔨 Latest commit 3194acb
🔍 Latest deploy log https://app.netlify.com/sites/loquacious-yeot-37fd34/deploys/65aa9198e5c3a800082ff521
😎 Deploy Preview https://deploy-preview-7--loquacious-yeot-37fd34.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@alstn2468 alstn2468 merged commit c975959 into main Jan 21, 2024
13 checks passed
@alstn2468 alstn2468 deleted the feat/react-query branch January 21, 2024 03:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants