Refine•9mo ago

How to handle relationships on create and updates?

kapa.ai•4/17/25, 12:54 PM

Hi @Woods. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•4/17/25, 12:54 PM

----------------------
To handle relationships during create and update operations in refine, you have several approaches depending on your data provider and backend. Here's how you can manage relationships:

Using Meta Options for Strapi and Similar Backends

For backends like Strapi v4 that support relational population, you can use the metameta option with the populatepopulate parameter:

const { mutate } = useCreate({
  resource: "posts",
  meta: {
    populate: ["category"]
  }
});

const { mutate } = useCreate({
  resource: "posts",
  meta: {
    populate: ["category"]
  }
});

This tells the data provider to populate the related fields when creating or updating records Building a CRUD app with Material UI and Strapi in React.

Handling Many-to-Many Relationships

For many-to-many relationships, you need to:

Create the main record first
Then create entries in the junction table

You can use the onSuccessonSuccess callback of useCreateuseCreate to handle this flow:

const { mutateAsync: createPost } = useCreate();
const { mutateAsync: createRelation } = useCreate();

const handleSubmit = async (values) => {
  // First create the post
  const response = await createPost({
    resource: "posts",
    values: {
      title: values.title,
      content: values.content
      // Exclude the categories field
    }
  });
  
  // Then create entries in the junction table for each category
  if (values.categories) {
    for (const categoryId of values.categories) {
      await createRelation({
        resource: "posts_categories",
        values: {
          post_id: response.data.id,
          category_id: categoryId
        }
      });
    }
  }
};

const { mutateAsync: createPost } = useCreate();
const { mutateAsync: createRelation } = useCreate();

const handleSubmit = async (values) => {
  // First create the post
  const response = await createPost({
    resource: "posts",
    values: {
      title: values.title,
      content: values.content
      // Exclude the categories field
    }
  });
  
  // Then create entries in the junction table for each category
  if (values.categories) {
    for (const categoryId of values.categories) {
      await createRelation({
        resource: "posts_categories",
        values: {
          post_id: response.data.id,
          category_id: categoryId
        }
      });
    }
  }
};

kapa.ai•4/17/25, 12:54 PM

For Supabase specifically, you can use the selectselect expression to work with many-to-many relationships Github Issue: How to implement many-to-many relationships.

Transforming Form Data Before Submission

You can transform form data before submitting it to the API using the onSubmitonSubmit prop in useFormuseForm:

const { onFinish, ...formProps } = useForm({
  onSubmit: async (values) => {
    // Transform values before submission
    const transformedValues = {
      ...values,
      // Transform relationship data as needed
    };
    
    return transformedValues;
  }
});

const { onFinish, ...formProps } = useForm({
  onSubmit: async (values) => {
    // Transform values before submission
    const transformedValues = {
      ...values,
      // Transform relationship data as needed
    };
    
    return transformedValues;
  }
});

Handling Nested Routes for Related Resources

For creating related resources within a parent context (e.g., creating a case for an opportunity), you can use dynamic routes:

import { useCreate, useParsed } from "@refinedev/core";

export const CreateCase = () => {
  const { id } = useParsed();

  const { mutate } = useCreate({
    resource: `opportunity/${id}/case`,
  });

  return (
    <div>
      <button
        onClick={() => {
          mutate({
            values: {
              lorem: "ipsum",
              foo: "bar",
            },
          });
        }}
      >
        Create Case
      </button>
    </div>
  );
};

import { useCreate, useParsed } from "@refinedev/core";

export const CreateCase = () => {
  const { id } = useParsed();

  const { mutate } = useCreate({
    resource: `opportunity/${id}/case`,
  });

  return (
    <div>
      <button
        onClick={() => {
          mutate({
            values: {
              lorem: "ipsum",
              foo: "bar",
            },
          });
        }}
      >
        Create Case
      </button>
    </div>
  );
};

This approach allows you to create related resources with the proper parent-child relationship Question about structuring data providers and resources.

Invalidating Related Data After Updates

After creating or updating related data, you might need to invalidate queries to refresh the UI:

```jsx
import { useCreate, useInvalidate, useParsed } from "@refinedev/core";

export const CreateRelatedItem = () => {
const { id } = useParsed();
const invalidate = useInvalidate();

kapa.ai•4/17/25, 12:54 PM

const { mutateAsync } = useCreate({
resource: parent/${id}/childparent/${id}/child,
});

const handleCreate = async (values) => {
await mutateAsync({ values });

// Invalidate the parent resource to refresh its data
invalidate({
resource: "parent",
id,
invalidates: ["resourceAll"],
});
};

// ...
};
```

This ensures that after creating or updating related data, the parent resource's data is refreshed to show the updated relationships.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•4/17/25, 12:54 PM

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