chore: don't run client side query until token is available

This commit is contained in:
Sean Norwood 2022-04-13 15:09:08 -05:00
parent 85f1a62e84
commit 8b86c327c5
3 changed files with 16 additions and 9 deletions

View File

@ -14,8 +14,12 @@ export const VideoList = () => {
const [selectedVideoUrl, setSelectedVideoUrl] = useState<Datum>(); const [selectedVideoUrl, setSelectedVideoUrl] = useState<Datum>();
const [viewStyle, setViewStyle] = useState<ViewStyle>("grid"); const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
const { data: session } = useSession(); const { data: session } = useSession();
const { data, error, isLoading } = useQuery("videos", () => const { data, error, isLoading } = useQuery(
getVideos(session.ta_token.token) ["videos", session?.ta_token?.token],
() => getVideos(session.ta_token.token),
{
enabled: !!session?.ta_token?.token,
}
); );
const handleSelectedVideo = (video: Datum) => { const handleSelectedVideo = (video: Datum) => {

View File

@ -22,5 +22,3 @@ export const getVideos = async (token: string): Promise<Videos> => {
return response.json(); return response.json();
}; };
// b4d4330462c7fc16c51873e45579b29a1a12fc90

View File

@ -36,8 +36,13 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const Channel: NextPage = () => { const Channel: NextPage = () => {
const { data: session } = useSession(); const { data: session } = useSession();
const { const {
data: { data: channels }, data: channels,
} = useQuery("channels", () => getChannels(session.ta_token.token)); error,
isLoading,
} = useQuery("channels", () => getChannels(session.ta_token.token), {
enabled: !!session?.ta_token?.token,
});
const [viewStyle, setViewStyle] = useState<ViewStyle>("grid"); const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
const handleSetViewstyle = (selectedViewStyle: ViewStyle) => { const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
@ -104,12 +109,12 @@ const Channel: NextPage = () => {
/> />
</div> </div>
</div> </div>
<h2>Total matching channels: {channels?.length} </h2> <h2>Total matching channels: {channels?.data?.length} </h2>
<div className={`channel-list ${viewStyle}`}> <div className={`channel-list ${viewStyle}`}>
{!channels ? ( {!channels.data ? (
<h2>No channels found...</h2> <h2>No channels found...</h2>
) : ( ) : (
channels?.map((channel) => { channels?.data.map((channel) => {
return ( return (
<div <div
key={channel?.channel_id} key={channel?.channel_id}