CODEWITHSUNDEEP
reactjsreact-nativereact-hooks
user3675843
user3675843

Reputation: 1

UseEffect fails to trigger after useQuery

I've simplified my component with the relevant bits. Basically a gql query that gets some data and when the data is in, it should be saved in a context(setLobbyData).

The console.log are there to help me figure it out but I don't really understand why the useEffect doesn't gets triggered after the data is fetched, as can be observed from the logs

const LobbySection = ({ route, navigation }: Props) => {
  const params = route.params;

  const lobbyDataQuery = useQuery<GetGame, GetGameVariables>(GET_LOBBY_DATA, {
    variables: { gameId: params.id },
    notifyOnNetworkStatusChange: true,
    pollInterval: 5000,
  });
  console.log('OOOOOO', lobbyDataQuery.data)

  const { refetch, data, error } = lobbyDataQuery;

  useEffect(() => {
    setLobbyData(data);
    console.log('%%%%%%%%Data', data)
  }, [data])

  useEffect(() => { console.log('{{{{{{{', isFocused, lobbyDataQuery.error)
    if (isFocused) {
      refetch();
      lobbyDataQuery.startPolling(5000);
      console.log('XXXXXXXXXXXXsetLobbyData', lobbyDataQuery.data)
      setLobbyData(data);
    }
  }, [data, isFocused, refetch]);
}

The logs look like

LOG  OOOOOO undefined
 LOG  %%%%Data undefined
 LOG  {{{{{{{ true undefined
 LOG  XXXXXXXXXXXXsetLobbyData undefined
 LOG  OOOOOO undefined
 LOG  OOOOOO undefined
LOG  OOOOOO {"checkedIn": 0, "filteredRankingForGame": [], "game": {"__typename": "Game", "courts": [[Object], [Object], [Object]], "date": "2023-09-13T09:04:36.577380+00:00", "endingTime": "2023-09-13T09:03:55.150+00:00", "extraInfo": "Qwert", "finished": false, "gameCode": "834 502", "gameLocation": "Moon", "gameMaker": 9286, "gameMakerName": "boo", "gameName": "Wawy", "gameStarted": false, "gameType": "random", "id": 11947, "numberOfBalls": 24, "numberOfPlayers": 12, "numberOfRounds": 0, "occasionId": null, "players": [[Object]], "reservePlayers": [], "reserveTeams": [], "startingTime": "2023-09-13T09:03:55.150+00:00", "teams": [], "totalNumberOfRounds": 8}, "gameCompanyBrand": null, "gameMessages": [], "isCheckedIn": false, "isGameMaker": true, "isInGame": true, "isInGameReserve": false, "team": null, "teamsAreFilled": null, "user": {"__typename": "User", "id": 9286}}
 LOG  vv {}

so at some point the data comes in, but the useEffect that has a dependency on either data or lobbyDataQuery gets triggered, the vv part is from a child component. At this point I'm questioning if I truly understand how useEffect is supposed to work. I didn't find any side effects for when it is used together with graphQL, perhaps I'm missing something quite obvious?

Upvotes: 0

Views: 37

Answers (1)

rymanso
rymanso

Reputation: 991

This is confusing because it looks like it should work. Are are you sure data itself is not conflicting with another variable with the same name?

Might be worth just trying

const { refetch, data, error } = useQuery<GetGame, GetGameVariables>(GET_LOBBY_DATA...

then using that data as the dependency on in your useEffect.

If that doesn't work maybe you can just try the onCompleted option.

  const lobbyDataQuery = useQuery<GetGame, GetGameVariables>(GET_LOBBY_DATA, {
    variables: { gameId: params.id },
    notifyOnNetworkStatusChange: true,
    pollInterval: 5000,
    onCompleted: (data) => {
      setLobbyData(data);
      console.log('%%%%%%%%Data', data)
    },
  });

Ill admit your code does look like it should work though, again..

Upvotes: 0

Related Questions