React 中的动态 GraphQL 突变与模板文字答案

【问题标题】：Dynamic GraphQL mutations in React with template literalsReact 中的动态 GraphQL 突变与模板文字
【发布时间】：2021-02-05 16:55:35
【问题描述】：

我正在尝试将我的 Google OAuth 响应发送到 gql 突变以对用户进行身份验证/登录。从 google 获取响应时，我正在执行以下操作：

const authGQL = (user) => graphql(gql`
    mutation {
        LoginOrSignup(name: ${user.profileObj.name}, email: ${user.profileObj.email}, googleId: 
        ${user.googleId}, imageUrl: ${user.profileObj.imageUrl}) {
      name
      email
      googleId
      imageUrl
    }
  }
`);

这是在我的突变文件中：

const mutation = new GraphQLObjectType({
    name: 'Mutation',
    fields: {
        LoginOrSignup: {
            type: UserType,
            args: {
                name: { type: new GraphQLNonNull(GraphQLString) },
                email: { type: new GraphQLNonNull(GraphQLString) },
                googleId: { type: new GraphQLNonNull(GraphQLString) },
                imageUrl: { type: new GraphQLNonNull(GraphQLString) }
            },
            resolve(parentValue, { name, email, googleId, imageUrl}, request) {
                return AuthService.verifyUser({ name, email, googleId, imageUrl, req: request })
            }
        }
    }
});

它没有达到解析功能，我不知道为什么！提前致谢。

【问题讨论】：

错误信息是什么？
Uncaught GraphQLError: Syntax Error: Expected ":", found Name "email".... 突变在 graphiql 中工作得很好 - 我可以注册/登录用户没问题.
哦，我刚刚注意到你正在使用gql 标签功能。您不能使用 tag 函数通过字符串插值动态传递变量。您需要使用 graphql 变量 blog.logrocket.com/graphql-variables-in-simple-terms 并通过 variables 键传递它们
谢谢！我会考虑将其作为解决方案。

标签： javascript reactjs graphql gql mutation

【解决方案1】：

感谢 azium 为我指明了正确的方向。我不得不使用变量：

const mutation = gql` 
mutation LoginOrSignup($name: String!, $email: String!, $googleId: String!, $imageUrl: String!, $id_token: String!){
  LoginOrSignup(name: $name, email: $email, googleId: $googleId, imageUrl: $imageUrl, id_token: $id_token) {
    email
    name
  }
}
`

在 React 中，我必须使用 props.mutate 设置这些变量：

    props.mutate({
      variables: {
        name: res.profileObj.name,
        email: res.profileObj.email,
        googleId: res.googleId,
        imageUrl: res.profileObj.imageUrl,
        id_token: res.tokenObj.id_token
      }
    })

【讨论】：