firstly I am new to RTK Query. I am trying to fetch some specific data from API but I don’t understand how to do it. If anyone can help me it will be great.
My API link: https://api.spacexdata.com/v3/launches
I just need some specific data like flight_number, mission_name, upcoming, launch_date_utc, rocket_name, launch_success, mission_patch_small .
I already fetched data but can’t able to fetch particular data what I want, don’t understand how to do it.
My code:
App.tsx:
import { useMissionsQuery, useMissionQuery } from "./services/missionsApi";
import "./App.css";
const App = () => {
const { data, error, isLoading, isFetching, isSuccess } = useMissionsQuery();
return (
<div className="App">
<h1>SpaceX Launches: Mission</h1>
{isLoading && <h2>...Loading</h2>}
{isFetching && <h2>...Fetching</h2>}
{error && <h2>Something went wrong</h2>}
{isSuccess && (
<div>
{data?.map((mission) => {
return (
<div className="data" key={mission.flight_number}>
<span>{mission.mission_name}</span>
<span>
<MissionDetail flight_number={mission.flight_number} />
</span>
</div>
);
})}
</div>
)}
</div>
);
};
export const MissionDetail = ({ flight_number }: { flight_number: string }) => {
const { data } = useMissionQuery(flight_number);
return <pre>{JSON.stringify(data, undefined, 2)}</pre>;
};
export default App;
services/missionsApi.tsx:
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { Mission } from "../models/mission.model";
export const missionsApi = createApi({
reducerPath: "missionsApi",
baseQuery: fetchBaseQuery({
baseUrl: "https://api.spacexdata.com/v3/launches",
}),
endpoints: (builder) => ({
missions: builder.query<Mission[], void>({
query: () => "/",
}),
mission: builder.query<Mission, string>({
query: (flight_number) => `/${flight_number}?`,
}),
}),
});
export const { useMissionsQuery, useMissionQuery } = missionsApi;
model
mission.model.ts:
export interface Mission {
flight_number: string;
mission_name: string;
upcoming: string;
launch_date_utc: string;
rocket: string;
rocket_name: string;
launch_success: string;
links: string;
mission_patch_small: string;
}
and store.ts
import { configureStore } from "@reduxjs/toolkit";
import { missionsApi } from "./services/missionsApi";
export const store = configureStore({
reducer: {
[missionsApi.reducerPath]: missionsApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(missionsApi.middleware),
});