I have these two Apollo queries in one React component:
const { data, loading, error } = useQuery(PlaylistQuery, {
variables: { _id: playlistId },
fetchPolicy: "cache-and-network",
});
const [loadSong, { called, loading, error, data }] = useLazyQuery(SongQuery, {
variables: {
_id: song._id,
},
});
This will obviously give me this error message:
Cannot redeclare block-scoped variable
What's a smart way to get around this?
To avoid this issue, you could simply name your queries' variables. As an example like below:
const { data: playListData, loading: playListLoading, error: playListError } = useQuery(PlaylistQuery, {
variables: { _id: playlistId },
fetchPolicy: "cache-and-network",
});
const [loadSong, { called: songFuctionCalled, loading: songLoading, error: songError, data :songData }] = useLazyQuery(SongQuery, {
variables: {
_id: song._id,
},
});