0

I've been following this tutorial, although I've been converting the steps produced to work with the ApolloClient because my API is graphql.

The problem I run into is that useNavigation()'s state property is never loading, it's always idle instead. I feel like I must be doing something wrong. Do I maybe have to pass a loadingComponent to the route or something? That's not the case in the tutorial at least.

My component + Dataloader are as follows:

export const VideoPlayer = () => {
    const data = useLoaderData() as Video;
    const navigation = useNavigation();
    
    if (navigation.state === 'loading') {
        console.log('loading'); // This never runs...
        return (<Container className="text-white">Loading!!!</Container>);
    }
    
    console.log(data, navigation.state); // This returns the data and 'idle', twice.
    
    return (
        <div className="ps-[225px] py-2">
            <div className="w-full pt-[60px]"></div>
            <Container>
                <h1 className="text-white">{data.id} {data.video_url}</h1>
            </Container>
        </div>
    );
}

export const VideoPlayerDataLoader = async ({params}: any) => {
    const GET_VIDEO = gql`
        query {
            video(id: "${params.videoId}") {
                id
                video_url
            }
        }
    `;
    
    const { data } = await client.query({
        query: GET_VIDEO
    });
    
    return data.video;
};

My router is as follows:

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        index: true,
        element: <VideosList />,
      },
      {
        index: true,
        path: "/:videoId",
        loader: VideoPlayerDataLoader,
        element: <VideoPlayer />,
      },
    ],
  },
]);
IdeTheMan
  • 21
  • 4

1 Answers1

2

I'm pretty sure I just misunderstood the tutorial. It seems the useNavigation().state changes to loading on the current page (right before the page switches), which makes sense!

IdeTheMan
  • 21
  • 4