ugly-tan•2y ago

Autocomplete tableNf not working in the edit component, object within an object { tax: tableNfe {} }

Hello, how do I set the GraphQL return in a controller when it's an object within an object? In the case below, while debugging with the getValues() from react-hook-form, I noticed that when the name attribute of the controller is defined as "tableNfe," it shows the "tableNfe" object within "tax," containing the fields "id" and "title." However, if I set the name attribute as "tax.tableNfe," which should be the correct way since it will be sent to the form within "tax," it returns null in getValues(), and the value is not loaded into the controller, leaving it without a value in both cases.

const meta = {
    operation: "example",
    fields: [
      "title",
      {
        tax: [
          {
            tableNfe: ["id", "title"],
            tableNfce: ["id", "title"],
          },
          "example",
        ],
      },
    ],
  };

  const {
    control,
    getValues,
  } = useForm<IProductService>({
    refineCoreProps: {
      meta,
      id,
    },
  });

<Edit saveButtonProps={saveButtonProps}>
<Grid item xs={12} md={6}>
  <Controller
    control={control}
    name="tax.tableNfe"
    defaultValue={null as any}
                      render={({ field }) => (
                        <Autocomplete
                          {...taxesAutoComplete}
                          {...field}
                          onChange={(_, value: ITax | null) => {
                            ...
                          }}
                          getOptionLabel={(item: ITax) => {
                            ...
                          }}
                          isOptionEqualToValue={(option: any, value: any) => {
                            ...
                          }}
                          renderInput={(params) => (
                            <TextField
                              ...
                            />
                          )}
                        />
                      )}
                    />
                  </Grid>

const meta = {
    operation: "example",
    fields: [
      "title",
      {
        tax: [
          {
            tableNfe: ["id", "title"],
            tableNfce: ["id", "title"],
          },
          "example",
        ],
      },
    ],
  };

  const {
    control,
    getValues,
  } = useForm<IProductService>({
    refineCoreProps: {
      meta,
      id,
    },
  });

<Edit saveButtonProps={saveButtonProps}>
<Grid item xs={12} md={6}>
  <Controller
    control={control}
    name="tax.tableNfe"
    defaultValue={null as any}
                      render={({ field }) => (
                        <Autocomplete
                          {...taxesAutoComplete}
                          {...field}
                          onChange={(_, value: ITax | null) => {
                            ...
                          }}
                          getOptionLabel={(item: ITax) => {
                            ...
                          }}
                          isOptionEqualToValue={(option: any, value: any) => {
                            ...
                          }}
                          renderInput={(params) => (
                            <TextField
                              ...
                            />
                          )}
                        />
                      )}
                    />
                  </Grid>

3 Replies

kapa.ai•2y ago

Hi @.martola. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems like you're trying to access nested fields in your GraphQL query using the useForm hook from Refine. In Refine, the meta property is used to pass additional information to data provider methods. This includes specifying which fields will be returned in the GraphQL query. In your case, you're trying to access the id and title fields of the tableNfe object, which is nested within the tax object. However, the extracts do not provide specific information on how to handle nested objects within objects when using the useForm hook. The examples provided in the extracts only show how to access fields of a single nested object, not an object within an object. Therefore, I would recommend checking the Refine documentation or reaching out to the Refine community for more specific guidance on this issue. Here are some useful links: - Refine Documentation (https://refine.dev/docs) - Refine Community on Discord (https://discord.gg/refine) I hope this helps, and I'm sorry I couldn't provide a more specific answer based on the information provided in the extracts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

absent-sapphire•2y ago

Hi @.martola, I don't think the problem is related to GraphQL. After all, useForm is concerned with the value returned by the dataProvider. If you provide reproducible example for us, we will happy to debug

Autocomplete tableNf not working in the edit component, object within an object { tax: tableNfe {} }

Did you find this page helpful?