How to handle relationships on create and updates?

2 Replies

Hi @Woods. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 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 meta option with the populate 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: 1. Create the main record first 2. Then create entries in the junction table You can use the onSuccess callback of useCreate 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
        }
      });
    }
  }
};

For Supabase specifically, you can use the select 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 onSubmit prop in useForm:

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:

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

export const CreateRelatedItem = () => {
  const { id } = useParsed();
  const invalidate = useInvalidate();
const { mutateAsync } = useCreate({
    resource: `parent/${id}/child`,
  });

  const handleCreate = async (values) => {
    await mutateAsync({ values });
    
    // Invalidate the parent resource to refresh its data
    invalidate({
      resource: "parent",
      id,
      invalidates: ["resourceAll"],
    });
  };
  
  // ...
};

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

export const CreateRelatedItem = () => {
  const { id } = useParsed();
  const invalidate = useInvalidate();
const { mutateAsync } = useCreate({
    resource: `parent/${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 :speech_balloon: ----------------------

kapa.ai•2w ago

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

How to handle relationships on create and updates?

Did you find this page helpful?