Server Communication for Game State

[benjstorlie]

Implement GraphQL mutations to save and retrieve game state on the server

[benjstorlie]

This has something to do with useMutation and useQuery that get imported from @apollo/client, but I was looking over the examples and I still am totally not sure. useMutation looked a lot different from useQuery.

Also, I'm not sure where it should go. useMutation looks like it's supposed to be a React hook. But it would be easier to define a saveGameState function not in the middle of a component. Because it needs to happen inside of the setGameArray( (prevState) => newState ) function, so it can use the 'updatedArray' variable that will be returned.

Going to add 'difficulty' 'gameId' 'elapsedTime' and 'isSolved' to the useState() variables that live in client/src/utils/GameContext.js, and move the component to wrap around the whole app.

[benjstorlie]

Maybe I'll start with a 'saveGame' button and see if that can work by itself. As an in between step to adding it to every move.

[benjstorlie]

Okay, here's what I have figured out. The example I was looking at in activity 26† was also updating the cache, which made it wayyyy more complicated. We can ignore cache for now, and add it later if we want.

So, here's how it can work. In client/src/utils/GameContext.js, along with all the useStates(), we can add const [updateGame] = useMutation(UPDATE_GAME); (importing all the appropriate things up top). Here, updateGame is a function. Then, in gameUtils, just like we were making 'doThingHandler( ... )' functions that took functions like setGameArray as parameters, and return a 'doThing()' function that other components use, we can have the 'doThingHandler()' functions also accept 'updateGame'.

In gameUtils, I think it makes sense to restructure the functions instead of doing setGameArray( (prevState) => updatedState ), we just also include gameArray as a parameter, use that to make updatedArray. Then after that, do both

  setGameArray( updatedArray );
  const { data } = await updateGame({
    variables: {
      gameId,
      gameData: JSON.stringify(updatedArray),
      elapsedTime
    },
  });

And since we're actually saving the game in many situations, we can make a function, that doesn't need to be exported, in gameUtils that can be called in many places.

async function saveGameState( updateGame, gameId, updatedArray, elapsedTime ) {
  const { data } = await updateGame({
    variables: {
      gameId,
      gameData: JSON.stringify(updatedArray),
      elapsedTime
    },
  });
  return data;
}

† 21-MERN/01-Activities/Day3/26-Stu_Resolver-Context/Solved/client/src/components/ThoughtForm/index.js