在反应中将道具作为graphql突变参数传递

Question

我的代码如下所示：

interface MutationProps{
  username: any,
  Mutation: any
}
const UseCustomMutation: React.FC<MutationProps> = (MutationProps: MutationProps) => {
  
  
  
  const [myFunc, {data, error}] = useMutation(MutationProps.Mutation);

  useEffect(() => {
    myFunc({variables:{username: MutationProps.username}}) 
    console.log(JSON.stringify(data))
    console.log(JSON.stringify(error, null , 2))
  }, [])
 return data 
}


export const DisplayUser = () => {
  const GET_USER = gql`
  
 mutation GetUser($username: String!){
getUser(username: $username) {
pfp
username
password
age
CurrentLive
ismod
description
fullname
}
}

 `
 const {username} : {username: any} = useParams()
 const MyData = UseCustomMutation(username, GET_USER)
 console.log(JSON.stringify(MyData))

但我得到了这个错误：×

传递给解析器的未定义参数不是有效的 GraphQL DocumentNode。您可能需要使用 >'graphql-tag' 或其他方法将您的操作转换为文档

Answer 1

你的代码是这样的：

interface MutationProps {
  username: string;
  Mutation: any;
}
const UseCustomMutation: React.FC<MutationProps> = ({ username, Mutation }) => {
  const [functionForDoingAction, { data, loading, error }] = useMutation(
    Mutation,
    {
      variables: {
        username,
      },
    }
  );

  useEffect(() => {
    // fn trigger for change data
    functionForDoingAction({
      variables: {
        username: "string_value",
      },
    });
    console.log(JSON.stringify(data));
    console.log(JSON.stringify(error, null, 2));
  }, []);

  if (loading) return "loading...";

  if (error) return `Submission error! ${error.message}`;

  return data;
};

export const DisplayUser = () => {
  const GET_USER = gql`
    mutation GetUser($username: String!) {
      getUser(username: $username) {
        pfp
        username
        password
        age
        CurrentLive
        ismod
        description
        fullname
      }
    }
  `;
  const { username }: { username: string } = useParams();
  const MyData = UseCustomMutation(username, GET_USER);
  console.log(JSON.stringify(MyData));
};

您可以将参数直接传递给他们作为选项参数提供的 useMutation 钩子。或者是从你得到的钩子中直接触发函数。