absent-sapphire•3mo ago

Antd useForm how to set custom variable for graphql

Trying to pass custom variables other than ID to a query is not working. Here is the code that I have. I am using useForm and what in my getOne query to have extra variable not only the ID. const { formProps: editFormProps, saveButtonProps: editSaveButtonProps } = useForm< GetFields<UpdateSettingValueMutation>, HttpError, GetVariables<UpdateSettingValueMutationVariables> >({ action: "edit", resource: "settings", id: editingId?.toString(), meta: { gqlQuery: SETTINGS_WITH_VALUES_DATA_QUERY, gqlMutation: UPDATE_SETTING_VALUES_MUTATION, gqlVariables: { extraValue: 1, }, }, queryMeta: { meta: { extraValue: 1, }, gqlVariables: { extraValue: 1, }, }, queryOptions: { meta: { extraValue: 1, }, }, mutationMode: "pessimistic", onMutationSuccess: () => { setEditingId(null); }, }); My graphql is this: export const SETTINGS_WITH_VALUES_DATA_QUERY = gql


  query SettingsWithValuesDataOne($id: ID!, $extraValue: Int!) {
    setting(id: $id, extraValue: $extraValue) {
        ...SettingsWithValuesDataFields
    }
  }
  ${SETTINGS_WITH_VALUES_DATA_FIELDS},

; I am not sure if I am missing something from the documentation but i have tried multiple ways as you can see in the above code and nothing seems to be helping it always sends only variables : {id: "1"} , the extraValue i am trying to pass its not there.

3 Replies

kapa.ai•3mo ago

Hi @VR. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To pass custom variables other than the ID to a GraphQL query using useForm in refine with Ant Design, you need to use the queryMeta property correctly. Based on the provided information, it seems like you are on the right track but might have some redundancy in your configuration. Here is a refined version of your code that should work:

const { formProps: editFormProps, saveButtonProps: editSaveButtonProps } =
  useForm<
    GetFields<UpdateSettingValueMutation>,
    HttpError,
    GetVariables<UpdateSettingValueMutationVariables>
  >({
    action: "edit",
    resource: "settings",
    id: editingId?.toString(),
    queryMeta: {
      extraValue: 1,
    },
    mutationMode: "pessimistic",
    onMutationSuccess: () => {
      setEditingId(null);
    },
  });

const { formProps: editFormProps, saveButtonProps: editSaveButtonProps } =
  useForm<
    GetFields<UpdateSettingValueMutation>,
    HttpError,
    GetVariables<UpdateSettingValueMutationVariables>
  >({
    action: "edit",
    resource: "settings",
    id: editingId?.toString(),
    queryMeta: {
      extraValue: 1,
    },
    mutationMode: "pessimistic",
    onMutationSuccess: () => {
      setEditingId(null);
    },
  });

In your GraphQL query, ensure that you are correctly defining the variables:

export const SETTINGS_WITH_VALUES_DATA_QUERY = gql`
  query SettingsWithValuesDataOne($id: ID!, $extraValue: Int!) {
    setting(id: $id, extraValue: $extraValue) {
        ...SettingsWithValuesDataFields
    }
  }
  ${SETTINGS_WITH_VALUES_DATA_FIELDS},
`;

export const SETTINGS_WITH_VALUES_DATA_QUERY = gql`
  query SettingsWithValuesDataOne($id: ID!, $extraValue: Int!) {
    setting(id: $id, extraValue: $extraValue) {
        ...SettingsWithValuesDataFields
    }
  }
  ${SETTINGS_WITH_VALUES_DATA_FIELDS},
`;

Explanation: - queryMeta: This property is used to pass additional information to the useOne hook that is used to fetch the data in the edit and clone modes. This is useful when you have to apply different values to the useOne hook from the useCreate or useUpdate hook mutations. In your case, you need to pass extraValue through queryMeta. For more details, you can refer to the queryMeta documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#querymeta). If you still face issues, ensure that your GraphQL server is correctly set up to handle the extraValue parameter. If you need further assistance, you can check the refine documentation or open an issue on their GitHub repository (https://github.com/refinedev/refine/issues). I hope this helps! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@224255611544666115> kapa.ai is still learning and improving, please let us know how it did by reacting below

absent-sapphireOP•3mo ago

It does not work, It keeps sending only the ID variable do you have other suggestions ?