[network tab from server redux dev toolsOkay, so I am making a little information card of Liverpool FC, using a public API from the back-end. I am now trying to pass my routes through RTK query. I have been trying to mess with with selectResult and I guess there's just something that I am not understanding. It went the states went from Loading... to updating, forcing a re-render & clearing the UI. So, I was trying to get away from the re-render so I passed through my api slice with tag types and onQueryFulfilled async func. Idk I've been throwing stuff at the wall to see what sticks. I'm sure its a simple fix, but its gotta be something im missing or I am not seeing. My idea was that the json element was trying to resolve as a circular dep, so I flatted it and sent it with JSON. But now its returning as JSON on my server, but I can't get that data to stick and stay.
api slice
educerPath:"footyAPI",
baseQuery: fetchBaseQuery({ baseUrl: 'serverorigin',
mode: 'cors',
credentials:'same-origin',
prepareHeaders:(headers) =>{
const accessToken = localStorage.getItem('access_token');
if(accessToken){
headers.set('authorization', `Bearer ${accessToken}`);
}
return headers;
} }),
tagTypes:['LFCStats', 'LFCInformation', 'LFCFixuturesById', 'LFCPlayersStats'],
endpoints: (builder) => ({
getLFCStats: builder.query<APIProps, string>({
query: () => '/api/LFCStats',
providesTags: ['LFCStats'],
async onQueryStarted(_, { queryFulfilled }) {
// `onStart` side-effect
// anything you want to run when the query starts
try {
const response = await queryFulfilled;
console.log(response.data);
} catch (err) {
console.log(err);
// Usage:
}
},
}),
getLFCInformation: builder.query({
query: () => '/api/LFCInformation',
providesTags: ['LFCInformation'],
}),
getLFCFixuturesById: builder.query({
query: (id) => `/api/LFCFixuturesById/${id}`,
providesTags: ['LFCFixuturesById'],
}),
getLFCPlayersStats: builder.query({
query: () => '/api/LFCPlayersStats',
providesTags: ['LFCPlayersStats'],
}),
}),
});
test component
const CardOneLFCTeamStats:React.FC<AppProps>= ():JSX.Element => {
const { data = [], error, isLoading } = useGetLFCStatsQuery('', {
selectFromResult: ({ data, isLoading, error }) => ({
data: data,
isLoading: isLoading,
error: error,
}),
refetchOnMountOrArgChange: true,
});
return (
<div className="card-title">
{error ? (
<>
oh no theres an error
</>
) : isLoading ? (
<>
loading...
</>
) : (data) ? (
<>
{ data.map((team: APIProps) => (
<div className="card" key={team.team_id}>
<h2>{team.name}</h2>
<img src={team.logo} alt="team logo" />
<ul>
<li>
<p>Founded: {team.founded}</p>
<p>Venue: {team.venue_name}</p>
<p>Address: {team.venue}</p>
<p>Capacity: {team.capacity}</p>
</li>
</ul>
</div>
))}
</>
) : null}
</div>
);
};
export default CardOneLFCTeamStats;
Yeah, so if anyone has any explicit examples on how I can get this out of the loading state
maybe its how I am trying to access the api? leading undefined?
Object { data: {…}, data1: {…}, data2: {…}, data3: {…} } data: Object { get: "teams/seasons", parameters: {…}, results: 14, … } data1: Object { get: "teams", parameters: {…}, results: 1, … } errors: Array [] get: "teams" paging: Object { current: 1, total: 1 } parameters: Object { id: "40" } response: Array [ {…} ] results: 1 : Object { … } data2: Object { get: "fixtures/headtohead", parameters: {…}, results: 39, … } data3: Object { get: