Question about structuring data providers and resources

[jcelmeta14]

Hey all!

First of all, I would like to thank you for the awesome framework that you guys have built. It has allowed me to prototype really quickly.

I am currently facing an issue and I would like to hear the opinions of experienced users when it comes to correctly structuring resources and data providers. Imagine the following scenario (hypothetical, but sort of represent the issue I am facing):

1. I have the following entities Opportunity -- 1:many --> Case
2. I want to create a case for an opportunity. Imagine calling POST api/oppotunity/:id/case
3. I want to use the useCreate hook.

it looks as if the I have 2 Resources (Opportunity, Case) and I also have two data Providers (OpportunityDataProvider, CaseDataProvider). In this case, I am thinking of using the useCreate hook with the CaseDataProvider. However I am uncertain about the following:

1. How do I build the dynamic part of the url (i.e. the id of the opportunity)
2. I am afraid that I also have to express this relation 1:many somehow, so that when a new case is added, the oppotunity with id of :id is refetched, or maybe the list of cases for that oppotunity are refetched. I am not sure how to do that.

Thank you for taking the time to read this rather long message and for your precious time!
Looking forward to hearing from you,
Jurgen

[alicanerdurmaz]

Hello @jcelmeta14,

You can use useCreate like this to achieve your case:

// ... Resource definition
resources={[
  {
    name: "case",
    create: "/opportunity/:id/case",
    meta: {
        dataProviderName: "CaseDataProvider",
    }
  },
]}


// ... Route definition

<Route path="/opportunity/:id/case" element={<CreateCase />} />

/// ... Component code

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

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

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

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

We have two options to re-fetch oppotunity resource:

• You can implement live-provider if your API supports.
• You can invalidate specific resource the fetch again.

Invalidation code example:

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

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

  const invalidate = useInvalidate();

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

  return (
    <div>
      <h1>Create case for opportunity</h1>
      <button
        onClick={async () => {
          await mutateAsync({
            values: {
              lorem: "ipsum",
              foo: "bar",
            },
          });
          invalidate({
            resource: "opportunity",
            id,
            invalidates: ["resourceAll"],
            dataProviderName: "OpportunityDataProvider",
          });
        }}
      >
        Create Case
      </button>
    </div>
  );
};

Please let me know if you have any further questions 🙌