GraphQL with useUpdate Variable "$id" is not defined

Hi, I have a problem with my useupdate hook where it doesn't read the ID I gave.

27 Replies

Hi @Tawan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're having an issue with the useUpdate hook not reading the ID you provided when working with GraphQL in refine. This is a known issue that has been reported before. When using GraphQL with refine's data hooks like useUpdate, you need to properly define your GraphQL mutation and ensure the ID is correctly passed. Based on the knowledge sources, there are a couple of potential issues: 1. The ID might not be properly defined in your GraphQL mutation. When using useUpdate with GraphQL, you need to provide a proper gqlMutation in the meta property that includes the ID variable definition. 2. There was a reported bug where useModalForm/useForm with Hasura/GraphQL creates mutation queries without ID (GitHub Issue #4062). Here's how you can properly use useUpdate with GraphQL:

import gql from "graphql-tag";
import { useUpdate } from "@refinedev/core";

const UPDATE_PRODUCT_MUTATION = gql`
  mutation UpdateOneProduct($id: ID!, $input: UpdateOneProductInput!) {
    updateOneProduct(id: $id, input: $input) {
      id
      title
      // other fields you want to return
    }
  }
`;

const { mutate } = useUpdate();

mutate({
  resource: "products",
  id: 1, // Make sure this is defined and not empty
  values: {
    title: "New Title",
  },
  meta: {
    gqlMutation: UPDATE_PRODUCT_MUTATION,
  },
});

import gql from "graphql-tag";
import { useUpdate } from "@refinedev/core";

const UPDATE_PRODUCT_MUTATION = gql`
  mutation UpdateOneProduct($id: ID!, $input: UpdateOneProductInput!) {
    updateOneProduct(id: $id, input: $input) {
      id
      title
      // other fields you want to return
    }
  }
`;

const { mutate } = useUpdate();

mutate({
  resource: "products",
  id: 1, // Make sure this is defined and not empty
  values: {
    title: "New Title",
  },
  meta: {
    gqlMutation: UPDATE_PRODUCT_MUTATION,
  },
});

Make sure that: 1. Your GraphQL mutation properly defines the $id variable in its parameters 2. You're passing a valid ID to the mutate function 3. The ID is not undefined or an empty string (there was a bug reported where empty string IDs caused errors) If you're using a data provider like @refinedev/graphql, you might also need to check if you need a custom dataMapper to handle your specific GraphQL API response format, as mentioned in this issue. For more information on using GraphQL with refine, you can refer to the Data Fetching documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@466571147794710528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

eastern-cyanOP•3w ago

Variable "$id" is never used in operation "UpdateOneSectionScore".', statusCode: 'GRAPHQL_VALIDATION_FAILED'

eastern-cyanOP•3w ago

@kapa.ai Variable "$id" is never used in operation "UpdateOneSectionScore".', statusCode: 'GRAPHQL_VALIDATION_FAILED'

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see you're encountering a GraphQL validation error with your UpdateOneSectionScore mutation, specifically that the $id variable is defined but never used in the operation. This is a common issue when working with GraphQL mutations in refine. The error occurs because your GraphQL mutation defines an $id variable (which refine's useUpdate automatically includes), but the mutation itself doesn't actually use this variable in its operation. Based on the previous issues with similar problems, here are some solutions: 1. Modify your GraphQL mutation to actually use the $id variable. For example:

const UPDATE_SECTION_SCORE_MUTATION = gql`
  mutation UpdateOneSectionScore($id: ID!, $input: UpdateSectionScoreInput!) {
    updateOneSectionScore(id: $id, input: $input) {
      id
      // other fields
    }
  }
`;

const UPDATE_SECTION_SCORE_MUTATION = gql`
  mutation UpdateOneSectionScore($id: ID!, $input: UpdateSectionScoreInput!) {
    updateOneSectionScore(id: $id, input: $input) {
      id
      // other fields
    }
  }
`;

2. Provide custom GraphQL variables through the meta property:

mutate({
  resource: "sectionScores",
  id: scoreId,
  values: updatedValues,
  meta: {
    gqlMutation: UPDATE_SECTION_SCORE_MUTATION,
    gqlVariables: {
      // Custom variables that match what your mutation expects
      // You might not need the id here if your mutation doesn't use it
    }
  }
});

mutate({
  resource: "sectionScores",
  id: scoreId,
  values: updatedValues,
  meta: {
    gqlMutation: UPDATE_SECTION_SCORE_MUTATION,
    gqlVariables: {
      // Custom variables that match what your mutation expects
      // You might not need the id here if your mutation doesn't use it
    }
  }
});

3. Check your data provider implementation: If you're using a custom GraphQL data provider, make sure it correctly handles the variables for your specific API requirements. This issue is similar to what was reported in GitHub Issue #6374, where custom variables weren't being properly passed to GraphQL queries. If your GraphQL API doesn't require an ID for updates (which is unusual but possible, especially for single types or specific API designs), you might need to customize how refine handles the update operation or use a different approach altogether. Let me know if you need more specific guidance based on your GraphQL schema and mutation structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@466571147794710528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

eastern-cyanOP•3w ago

@kapa.ai can you show me an example

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'll provide you with a complete example of how to properly use useUpdate with GraphQL in refine, ensuring the ID is correctly used in your mutation. Here's an example based on the documentation:

import { useUpdate } from "@refinedev/core";
import gql from "graphql-tag";

// Define your GraphQL mutation that properly uses the $id variable
const UPDATE_SECTION_SCORE_MUTATION = gql`
  mutation UpdateOneSectionScore($id: ID!, $input: UpdateSectionScoreInput!) {
    updateOneSectionScore(where: { id: $id }, data: $input) {
      id
      score
      section {
        id
        title
      }
    }
  }
`;

// In your component
const MyComponent = () => {
  const { mutate } = useUpdate();
  
  const handleUpdate = () => {
    mutate({
      resource: "sectionScores",
      id: 123, // The ID of the record you want to update
      values: {
        score: 95,
        comments: "Great improvement"
      },
      meta: {
        gqlMutation: UPDATE_SECTION_SCORE_MUTATION
      }
    });
  };
  
  return (
    <button onClick={handleUpdate}>Update Score</button>
  );
};

import { useUpdate } from "@refinedev/core";
import gql from "graphql-tag";

// Define your GraphQL mutation that properly uses the $id variable
const UPDATE_SECTION_SCORE_MUTATION = gql`
  mutation UpdateOneSectionScore($id: ID!, $input: UpdateSectionScoreInput!) {
    updateOneSectionScore(where: { id: $id }, data: $input) {
      id
      score
      section {
        id
        title
      }
    }
  }
`;

// In your component
const MyComponent = () => {
  const { mutate } = useUpdate();
  
  const handleUpdate = () => {
    mutate({
      resource: "sectionScores",
      id: 123, // The ID of the record you want to update
      values: {
        score: 95,
        comments: "Great improvement"
      },
      meta: {
        gqlMutation: UPDATE_SECTION_SCORE_MUTATION
      }
    });
  };
  
  return (
    <button onClick={handleUpdate}>Update Score</button>
  );
};

The key points in this example: 1. The GraphQL mutation explicitly defines the $id variable in its parameters 2. The mutation actually uses this ID in the operation (in the where: { id: $id } clause) 3. We're passing a concrete ID value to the mutate function If your GraphQL API has a different structure for updates, you might need to adjust the mutation. For example, some APIs might expect:

mutation UpdateOneSectionScore($id: ID!, $input: UpdateSectionScoreInput!) {
  updateOneSectionScore(id: $id, input: $input) {
    id
    score
  }
}

mutation UpdateOneSectionScore($id: ID!, $input: UpdateSectionScoreInput!) {
  updateOneSectionScore(id: $id, input: $input) {
    id
    score
  }
}

For more information on using GraphQL with refine, you can refer to the Data Fetching documentation for GraphQL. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@466571147794710528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

eastern-cyanOP•3w ago

@kapa.ai

    const submitForm = async () => {
        const updatePromises = (scorecardData?.data.sectionScore || []).map(section => {
            console.log("Processing section:", section); 
    
            if (!section.id) {
                console.error("Invalid section ID detected:", section);
                return Promise.resolve();
            }
            

              
    
            return updateSections({
                id: Number(section.id.trim()) ,
                resource: "updateOneSectionScore",
        
                values: { 
                    // id: Number(section.id.trim()),
                    // score: section.score
                  
                        // id: Number(section.id.trim()), 
                        score: section.score 
                },
                meta: {
                    gqlMutation: UPDATE_SECTION_SCORE
                }
               
            });
        });
    
        await Promise.all(updatePromises);
        console.log("All updates completed.");
    };

    const submitForm = async () => {
        const updatePromises = (scorecardData?.data.sectionScore || []).map(section => {
            console.log("Processing section:", section); 
    
            if (!section.id) {
                console.error("Invalid section ID detected:", section);
                return Promise.resolve();
            }
            

              
    
            return updateSections({
                id: Number(section.id.trim()) ,
                resource: "updateOneSectionScore",
        
                values: { 
                    // id: Number(section.id.trim()),
                    // score: section.score
                  
                        // id: Number(section.id.trim()), 
                        score: section.score 
                },
                meta: {
                    gqlMutation: UPDATE_SECTION_SCORE
                }
               
            });
        });
    
        await Promise.all(updatePromises);
        console.log("All updates completed.");
    };

query

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($id: ID!, $input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(id: $id, input: $input) {
        id
    }
}
`;

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($id: ID!, $input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(id: $id, input: $input) {
        id
    }
}
`;

error

message: 'Unknown argument "id" on field "Mutation.updateOneSectionScore".', statusCode: 'GRAPHQL_VALIDATION_FAILED'}

message: 'Unknown argument "id" on field "Mutation.updateOneSectionScore".', statusCode: 'GRAPHQL_VALIDATION_FAILED'}

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue with your GraphQL mutation. The error message indicates that your GraphQL API doesn't accept an id argument directly on the updateOneSectionScore field. This is a common mismatch between refine's default behavior and your specific GraphQL schema. Based on the error message Unknown argument "id" on field "Mutation.updateOneSectionScore", it seems your GraphQL API has a different structure for updates than what you're currently using. Here's how you can fix it: 1. First, you need to modify your GraphQL mutation to match your API's expected structure. Your API might expect a different way to specify which record to update. Common patterns include:

mutation UpdateOneSectionScore($id: ID!, $input: UpdateOneSectionScoreInput!) {
  updateOneSectionScore(where: { id: $id }, data: $input) {
    id
  }
}

mutation UpdateOneSectionScore($id: ID!, $input: UpdateOneSectionScoreInput!) {
  updateOneSectionScore(where: { id: $id }, data: $input) {
    id
  }
}

mutation UpdateOneSectionScore($id: ID!, $input: UpdateOneSectionScoreInput!) {
  updateOneSectionScore(input: { id: $id, ...otherFields }) {
    id
  }
}

mutation UpdateOneSectionScore($id: ID!, $input: UpdateOneSectionScoreInput!) {
  updateOneSectionScore(input: { id: $id, ...otherFields }) {
    id
  }
}

2. Then update your code to match this structure:

return updateSections({
    id: Number(section.id.trim()),
    resource: "updateOneSectionScore",
    values: { 
        score: section.score 
    },
    meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        // You might need to add custom variables mapping
        gqlVariables: (params) => {
            return {
                id: params.id,
                input: params.values
            };
        }
    }
});

return updateSections({
    id: Number(section.id.trim()),
    resource: "updateOneSectionScore",
    values: { 
        score: section.score 
    },
    meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        // You might need to add custom variables mapping
        gqlVariables: (params) => {
            return {
                id: params.id,
                input: params.values
            };
        }
    }
});

The key is to check your GraphQL API documentation or schema to understand exactly how the updateOneSectionScore mutation expects to receive the ID and input data. If you're using a specific GraphQL backend like Hasura, NestJS, or others, they might have specific conventions for update mutations that you need to follow. For example, some APIs might require the ID to be part of the input object rather than a separate parameter. For more information on using GraphQL with refine, you can refer to the Data Fetching documentation for GraphQL. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@466571147794710528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

eastern-cyanOP•3w ago

@kapa.ai here is my request from postman, which it works

mutation UpdateOneSectionScore {
    updateOneSectionScore(input: { id: "28", update: { score: 0 } }) {
        id
    }
}

mutation UpdateOneSectionScore {
    updateOneSectionScore(input: { id: "28", update: { score: 0 } }) {
        id
    }
}

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue now. Your GraphQL API expects a different structure for the mutation than what you're currently using in your code. The working Postman request shows that your API expects the ID to be part of the input object, specifically in a structure like input: { id: "28", update: { score: 0 } }. Here's how you should modify your code to match this structure:

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(input: $input) {
        id
    }
}
`;

// Then in your submitForm function:
return updateSections({
    id: Number(section.id.trim()),
    resource: "updateOneSectionScore",
    values: { 
        score: section.score 
    },
    meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        // Custom variables mapping to match your API structure
        gqlVariables: (params) => {
            return {
                input: {
                    id: String(params.id), // Convert to string if your API expects string IDs
                    update: {
                        score: params.values.score
                    }
                }
            };
        }
    }
});

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(input: $input) {
        id
    }
}
`;

// Then in your submitForm function:
return updateSections({
    id: Number(section.id.trim()),
    resource: "updateOneSectionScore",
    values: { 
        score: section.score 
    },
    meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        // Custom variables mapping to match your API structure
        gqlVariables: (params) => {
            return {
                input: {
                    id: String(params.id), // Convert to string if your API expects string IDs
                    update: {
                        score: params.values.score
                    }
                }
            };
        }
    }
});

The key changes are: 1. Remove the $id parameter from your mutation definition since it's included in the input 2. Use the gqlVariables function in the meta object to structure your variables exactly as your API expects them 3. Format the input object to match what your Postman request shows: input: { id: "28", update: { score: 0 } } This approach uses the meta property's capabilities to customize how refine interacts with your GraphQL API, as described in the Data Fetching documentation for GraphQL. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@466571147794710528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

eastern-cyanOP•3w ago

@kapa.ai message: 'Unknown argument "id" on field "Mutation.updateOneSectionScore".', statusCode: 'GRAPHQL_VALIDATION_FAILED'

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see you're still encountering the GraphQL validation error about the unknown "id" argument on your mutation. This error occurs because refine is trying to use the ID as a direct parameter to your mutation, but your GraphQL API doesn't accept it that way. Based on your previous Postman example that works:

mutation UpdateOneSectionScore {
    updateOneSectionScore(input: { id: "28", update: { score: 0 } }) {
        id
    }
}

mutation UpdateOneSectionScore {
    updateOneSectionScore(input: { id: "28", update: { score: 0 } }) {
        id
    }
}

Your API expects the ID to be nested inside the input parameter, not as a separate parameter. Here's how to fix it: 1. Update your GraphQL mutation to match your API's structure:

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(input: $input) {
        id
    }
}
`;

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(input: $input) {
        id
    }
}
`;

2. When calling updateSections, use the gqlVariables option to structure your variables correctly:

return updateSections({
    id: Number(section.id.trim()),
    resource: "updateOneSectionScore",
    values: { 
        score: section.score 
    },
    meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        gqlVariables: (params) => {
            return {
                input: {
                    id: String(params.id),
                    update: {
                        score: params.values.score
                    }
                }
            };
        }
    }
});

return updateSections({
    id: Number(section.id.trim()),
    resource: "updateOneSectionScore",
    values: { 
        score: section.score 
    },
    meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        gqlVariables: (params) => {
            return {
                input: {
                    id: String(params.id),
                    update: {
                        score: params.values.score
                    }
                }
            };
        }
    }
});

The key is that your mutation definition should only have the $input parameter, not the $id parameter, and you need to use gqlVariables to structure your data exactly as your API expects it. This approach is documented in the Data Fetching documentation for GraphQL, which explains how to use the meta property to customize GraphQL operations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@466571147794710528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

eastern-cyanOP•3w ago

@kapa.ai i need ip but I dont need it it can you make it work?

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($id: ID!, $input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(input: $input) {
        id
    }
}
`;

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($id: ID!, $input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(input: $input) {
        id
    }
}
`;

message: 'Variable "$id" is never used in operation "UpdateOneSectionScore".', statusCode: 'GRAPHQL_VALIDATION_FAILED

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue in your GraphQL mutation. You're defining the $id variable in your mutation parameters, but you're not actually using it in the operation, which is causing the GraphQL validation error. Based on your Postman example from earlier, here's how to fix your mutation:

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(input: $input) {
        id
    }
}
`;

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(input: $input) {
        id
    }
}
`;

Notice I've removed the $id: ID! parameter since it's not being used in the operation. Your API expects the ID to be part of the input object, not as a separate parameter. Then, when using this mutation with useUpdate, structure your code like this:

return updateSections({
    id: Number(section.id.trim()),
    resource: "updateOneSectionScore",
    values: { 
        score: section.score 
    },
    meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        gqlVariables: (params) => {
            return {
                input: {
                    id: String(params.id),
                    update: {
                        score: params.values.score
                    }
                }
            };
        }
    }
});

return updateSections({
    id: Number(section.id.trim()),
    resource: "updateOneSectionScore",
    values: { 
        score: section.score 
    },
    meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        gqlVariables: (params) => {
            return {
                input: {
                    id: String(params.id),
                    update: {
                        score: params.values.score
                    }
                }
            };
        }
    }
});

The gqlVariables function in the meta object is crucial here - it allows you to structure your variables exactly as your API expects them, incorporating the ID into the input object rather than passing it as a separate parameter. This approach is documented in the Data Fetching documentation for GraphQL, which explains how to customize GraphQL operations using the meta property. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@466571147794710528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

eastern-cyanOP•3w ago

still same error @kapa.ai

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're still encountering the same error. Let's troubleshoot this more carefully by examining what might be happening with your GraphQL mutation. The error suggests that refine is still trying to include the $id variable in your GraphQL operation even though you've removed it from your mutation definition. This is likely happening because refine's useUpdate hook automatically includes the ID parameter by default. Here's a more comprehensive approach to solve this issue: 1. First, try using the custom method instead of useUpdate since it gives you more control over the variables:

import { useCustomMutation } from "@refinedev/core";

// In your component:
const { mutate } = useCustomMutation();

// Then in your submitForm function:
return mutate({
    url: "",  // Leave empty for GraphQL
    method: "post",
    values: {
        input: {
            id: String(section.id.trim()),
            update: {
                score: section.score
            }
        }
    },
    meta: {
        gqlMutation: UPDATE_SECTION_SCORE
    }
});

import { useCustomMutation } from "@refinedev/core";

// In your component:
const { mutate } = useCustomMutation();

// Then in your submitForm function:
return mutate({
    url: "",  // Leave empty for GraphQL
    method: "post",
    values: {
        input: {
            id: String(section.id.trim()),
            update: {
                score: section.score
            }
        }
    },
    meta: {
        gqlMutation: UPDATE_SECTION_SCORE
    }
});

2. If you prefer to keep using useUpdate, you can try overriding the data provider's behavior for this specific resource:

const dataProvider = {
    ...GraphQLDataProvider(client),
    update: {
        ...GraphQLDataProvider(client).update,
        getVariables: (params) => {
            return {
                input: {
                    id: String(params.id),
                    update: params.variables
                }
            };
        }
    }
};

const dataProvider = {
    ...GraphQLDataProvider(client),
    update: {
        ...GraphQLDataProvider(client).update,
        getVariables: (params) => {
            return {
                input: {
                    id: String(params.id),
                    update: params.variables
                }
            };
        }
    }
};

3. Another approach is to use the buildVariables option in your data provider configuration as mentioned in the GraphQL data provider documentation:

const dataProvider = GraphQLDataProvider(client, {
    update: {
        buildVariables: (params) => {
            return {
                input: {
                    id: String(params.id),
                    update: params.values
                }
            };
        }
    }
});

const dataProvider = GraphQLDataProvider(client, {
    update: {
        buildVariables: (params) => {
            return {
                input: {
                    id: String(params.id),
                    update: params.values
                }
            };
        }
    }
});

If you're still encountering issues, it might be helpful to check your GraphQL server logs or use a GraphQL playground to test your mutation directly and see exactly what variables structure it expects. Let me know if any of these approaches helps resolve the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@466571147794710528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

eastern-cyanOP•3w ago

@kapa.ai let's start from begining, and i want to use only useUpdate and I also you nest js so i cant change backend

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you want to start fresh and use only the useUpdate hook for your GraphQL mutation. Let's build a complete solution step by step. Here's how to properly use useUpdate with GraphQL in refine: 1. First, define your GraphQL mutation correctly:

import gql from "graphql-tag";

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(input: $input) {
        id
    }
}
`;

import gql from "graphql-tag";

export const UPDATE_SECTION_SCORE = gql`
mutation UpdateOneSectionScore($input: UpdateOneSectionScoreInput!) {
    updateOneSectionScore(input: $input) {
        id
    }
}
`;

2. Then use the useUpdate hook with proper configuration:

import { useUpdate } from "@refinedev/core";

const MyComponent = () => {
  const { mutate } = useUpdate();
  
  const handleUpdate = (sectionId, score) => {
    mutate({
      resource: "updateOneSectionScore",
      id: sectionId,
      values: { 
        score: score 
      },
      meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        gqlVariables: (params) => {
          // This is the key part - structure variables exactly as your API expects
          return {
            input: {
              id: String(params.id),
              update: {
                score: params.values.score
              }
            }
          };
        }
      }
    });
  };
  
  return (
    <button onClick={() => handleUpdate(28, 95)}>Update Score</button>
  );
};

import { useUpdate } from "@refinedev/core";

const MyComponent = () => {
  const { mutate } = useUpdate();
  
  const handleUpdate = (sectionId, score) => {
    mutate({
      resource: "updateOneSectionScore",
      id: sectionId,
      values: { 
        score: score 
      },
      meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        gqlVariables: (params) => {
          // This is the key part - structure variables exactly as your API expects
          return {
            input: {
              id: String(params.id),
              update: {
                score: params.values.score
              }
            }
          };
        }
      }
    });
  };
  
  return (
    <button onClick={() => handleUpdate(28, 95)}>Update Score</button>
  );
};

The most important part here is the gqlVariables function in the meta object. This function allows you to customize how the variables are structured in your GraphQL request, overriding refine's default behavior of passing the ID as a separate parameter. This approach is documented in the Data Fetching documentation for GraphQL, which explains how to use the meta property to customize GraphQL operations. If you're using this in a form or with multiple updates like in your previous example, you can integrate it like this:

const submitForm = async () => {
  const updatePromises = (scorecardData?.data.sectionScore || []).map(section => {
    if (!section.id) {
      console.error("Invalid section ID detected:", section);
      return Promise.resolve();
    }
    
    return mutate({
      resource: "updateOneSectionScore",
      id: Number(section.id.trim()),
      values: { 
        score: section.score 
      },
      meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        gqlVariables: (params) => {
          return {
            input: {
              id: String(params.id),
              update: {
                score: params.values.score
              }
            }
          };
        }
      }
    });
  });

  await Promise.all(updatePromises);
  console.log("All updates completed.");
};

const submitForm = async () => {
  const updatePromises = (scorecardData?.data.sectionScore || []).map(section => {
    if (!section.id) {
      console.error("Invalid section ID detected:", section);
      return Promise.resolve();
    }
    
    return mutate({
      resource: "updateOneSectionScore",
      id: Number(section.id.trim()),
      values: { 
        score: section.score 
      },
      meta: {
        gqlMutation: UPDATE_SECTION_SCORE,
        gqlVariables: (params) => {
          return {
            input: {
              id: String(params.id),
              update: {
                score: params.values.score
              }
            }
          };
        }
      }
    });
  });

  await Promise.all(updatePromises);
  console.log("All updates completed.");
};

This approach should work with your GraphQL API based on the Postman example you shared earlier. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@466571147794710528> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

GraphQL with useUpdate Variable "$id" is not defined

Did you find this page helpful?