使用 GraphQL 将 ID 值从 API 保存到用户

Question

我正在开发一个视频游戏网站，用户可以在该网站上将游戏保存到列表中。这应该是如何工作的，当用户点击“完成游戏”时，游戏的 ID 被保存到一个保存值的状态。然后将该值传递到突变中，然后突变运行，将游戏的 ID 保存到已完成游戏的用户列表中。但是，我在控制台中看到的是：

"GraphQLError: Variable \"$addGame\" got invalid value { gameId: 740, name: \"Halo: Combat Evolved\",

上述错误继续存在，列出了整个 API 响应，而不是只是游戏 ID。

我能够成功地将游戏添加到资源管理器中的列表中，并进行以下更改：

    mutation completeGame($addGame: AddNewGame!) {
        completeGame(addGame: $addGame) {
            _id
            completedGameCount
            completedGames {
                gameId
            }
        }
    }

使用以下变量：

{
  "addGame": {"gameId": 740}
}

我怎样才能 trim 将传递到突变中的内容仅作为 gameId？

下面是整个页面，除了底部的 return 语句。

    const [selectedGame, setSelectedGame] = useState([]);

    const [savedGameIds, setSavedGameIds] = useState(getSavedGameIds());

    const [completeGame, { error }] = useMutation(COMPLETE_GAME);

    const { id: gameId } = useParams();

    useEffect(() => {
        return () => saveGameIds(savedGameIds);
    });

    useEffect(() => {

        async function getGameId(gameId) {

            const response = await getSpecificGame(gameId);

            if (!response.ok) {
                throw new Error('Something went wrong...');
            }

            const result = await response.json();

            const gameData = result.map((game) => ({

                gameId: game.id,
                name: game.name,
                cover: game.cover,
                summary: game.summary,
                platforms: game.platforms,
                platformId: game.platforms,
                genres: game.genres,
                genreId: game.genres,
                
            }));

            setSelectedGame(gameData);

        }

        getGameId(gameId);

    }, [])

    const handleCompleteGame = async (gameId) => {
        
        const gameToComplete = selectedGame.find((game) => game.gameId === gameId);

        const token = Auth.loggedIn() ? Auth.getToken() : null;

        if (!token) {
            return false;
        }

        try {
            const { data } = await completeGame({
                variables: { addGame: { ...gameToComplete } },
            });

            console.log(data);

            setSavedGameIds([...savedGameIds, gameToComplete]);
        } catch (err) {
            console.error(err);
        }

    };

当我能够显式定义变量时，随着资源管理器中的突变工作，我被引导相信问题不在于解析器或 typedef，所以我将省略这些post 因为我不想让它太长。

但是，如果任何人都可以提供帮助，我很乐意附上任何额外的代码（解析器、typeDef、getSavedGameIds 函数等）。问题（我认为）在于让我的响应与我在资源管理器中使用的语法相匹配，这意味着 trim 除了 gameId 之外的所有内容。

我特别怀疑这条线

const gameToComplete = selectedGame.find((game) => game.gameId === gameId)

但我已经摆弄了一段时间无济于事。

感谢任何能够提供帮助的人！

Answer 1

听起来您正试图将更多信息传递到您的突变中，然后您的架构被定义为允许。这部分：

const { data } = await completeGame({
  variables: { addGame: { ...gameToComplete } },
});

您在此处传播 gameToComplete，这意味着 gameToComplete 对象中的所有内容都将作为变量发送。如果您的架构设置为只期望 gameId 被传入，但您的错误消息显示 name 也被传入，您只需要调整您的变量以排除您不能传入的所有内容接受。尝试：

const { data } = await completeGame({
  variables: { addGame: { gameId } },
});

使用 GraphQL 将 ID 值从 API 保存到用户

Saving an ID value from an API to a User with GraphQL

apollo

reactjs

graphql

graphql-mutation