์๋ ํ์ธ์ Foma ์ ๋๋ค.
์ค๋์ RTK-Query์์ ํ๋ผ๋ฏธํฐ์ ๋ง๊ฒ ์ํ๋ ํน์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด๋ ค๊ณ ํฉ๋๋ค.
๋ง์ ์ฝ์ง์ ํ๊ณ ๊ฒฐ๊ตญ ํด๊ฒฐ๋ฒ์ ์์๋ด๊ฒ ๋์ด ๊ธ๋ก ์ ๋ฆฌํ๋ ค๊ณ ํฉ๋๋ค.
๋ฐ๋ก ์์ํ ๊ฒ์~
1. ์ฒซ ๋ฒ์งธ ์๋
์ฐ์ ์ ๊ฐ ํ๋ ค ํ๋๊ฑด ์ ์ ๋ฅผ ์ด๋ฆ์ผ๋ก ์กฐํํด์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฒ์ด์๋๋ฐ์.
์๋์ ๊ฐ์ด ์ฟผ๋ฆฌ๋ฅผ ํตํด์ ์๋ํฌ์ธํธ๋ฅผ ๋ง๋ค์์ต๋๋ค.
export const userAPISlice = createApi({
reducerPath: 'userAPI',
baseQuery: fetchBaseQuery({baseUrl: 'http://192.168.111.34:3001/api'}),
endpoints: builder => ({
...
getUserByName: builder.query<User, String>({
query: (name: string) => `/user/${name}`,
}),
...
๊ทธ๋ฆฌ๊ณ ์ด์ ๊ฐ์ด ํน์ ์ด๋ฆ๊ณผ ํจ๊ป ์์ฒญํ์ฌ ์ ์ ๊ฐ ์๋์ง ์๋์ง ์ฒดํฌํ๊ณ , ์๋ค๋ฉด ์ ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๋ ค๊ณ ํ์๋๋ฐ์.
const {data:user} = useGetUserByNameQuery('์ด๋ฆ')
Login ๋ฒํผ์ ๋๋ ์ ๋ ํ์ฌ inputText์ ์ ํ ์๋ ์ด๋ฆ์ ์ฒดํฌํด์ผ ํ๋๋ฐ์.
๊ทธ๊ฒ์ ๊ตฌํํ๊ธฐ ์ํด์ ๋ค์๊ณผ ๊ฐ์ด ๊ตฌํํด ์ค์ผ ํ์ฃ .
const handleLogin = (name:string) => {
const {data:user} = useGetUserByNameQuery(name)
...
ํ์ง๋ง ์์ ๊ฐ์ด ๊ตฌํํ์ ๊ฒฝ์ฐ invalid hook call ์๋ฌ๊ฐ ๋ฐ์ํ๊ฒ ๋ฉ๋๋ค.
2. ๋ ๋ฒ์งธ ์๋
๊ทธ๋์ ๋ ๋ฒ์งธ๋ก ์๋ํ ๋ฐฉ๋ฒ์ ๋ก๊ทธ์ธ ๋ฒํผ์ ๋๋ ์ ๋ ์ด๋ฆ์ ์ ์ฅํ confirmName state๋ฅผ ๋ง๋ค์ด ์คฌ์ต๋๋ค.
์ฟผ๋ฆฌ์ ํ๋ผ๋ฏธํฐ์ ํด๋น confirmName์ ๋ฃ์ด์คฌ์ต๋๋ค.
const [confirmName, setConfirmName] = useState<string>('');
const {data: user} = useGetUserByNameQuery(confirmName);
ํ์ง๋ง ์๋์ ๊ฐ์ด confirmName์ ์ ํด์ฃผ๊ณ ๋ก๊ทธ๋ฅผ ์ถ๋ ฅํ๋ฉด ๋ฐ๋ก ์ธํ ํด์ค ์ด๋ฆ์ด ์๋๋ผ ๋ฐ๋ก ๊ทธ ์ ๊ฐ์ด ๋์์ต๋๋ค.
const handleLogin = (name:string) => {
setConfirmName(name)
console.log(confirmName);
...
๋ฐ๋ก ๋ฐ๋ ๊ฐ์ ํ์ธํ๊ธฐ ์ํด์ useEffect๋ฅผ ์ด์ฉํด์ ํ์ธํ ๋ค ๋ก์ง์ ์์ฑํด ์ฃผ๋ฉด ๋์์ง๋ง, ์ด ๋ํ ๋ง์ ์๋ฌ๊ฐ ๋ฐ์ํ์ต๋๋ค.
useEffect(() => {
console.log(confirmName);
}, [confirmName]);
3. ์ธ ๋ฒ์งธ ์๋
๊ฒฐ๊ตญ ์ธ ๋ฒ์งธ ์๋ ๋์ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์์๋๋๋ฐ์.
๋ฐ๋ก userAPISlice๋ฅผ ์ฟผ๋ฆฌ๋ก ๋ฐ์์ค๋ ๊ฒ์ด ์๋๋ผ mutation์ ํตํ์ฌ ์์ฒญ์ ํ ๋ค transformResponse ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ๊ฒ์ด์์ต๋๋ค.
export const userAPISlice = createApi({
reducerPath: 'userAPI',
baseQuery: fetchBaseQuery({baseUrl: 'http://192.168.111.34:3001/api'}),
endpoints: builder => ({
...
getUserByName: builder.mutation({
query: (name: string) => ({
url: `/username/${name}`,
method: 'GET',
}),
transformResponse: (response: User) => {
return response;
},
}),
...
mutation์ ๋ง๋ค์ด ์ค๋๋ค.
import {useGetUserByNameMutation} from '../api/UserAPISlice';
const [login] = useGetUserByNameMutation();
๊ทธ ๋ค์ ์๋์ ๊ฐ์ด login(์ํ๋ ์ด๋ฆ)์ .unwrap() ๋ฉ์๋๋ก ๋ฐ์์ค๋ฉด ์ ์ ์ ์ ๋ณด๊ฐ ๋ฐ์์ ์ง๊ฒ ๋ฉ๋๋ค.
const handleLogin = async () => {
try {
const user = await login(inputText).unwrap();
...
} catch (err) {
console.log(err);
}
};
๋๊ธ