Nicolas Posts - Answer Overflow

Nicolas

Explore posts from servers

CDCloudflare Developers SSolidJS RRefine TtRPC WWindmill HHono DTDrizzle Team

•Created by conscious-sapphire on 2/4/2024 in #ask-any-question

Error Creating New Refine App

Hello all, I am running into errors trying to start a new refine app. Here is what I did: npm create refine-app@latest

✔ Downloaded remote source successfully.
✔ Choose a project template · refine-vite
✔ What would you like to name your project?: · frontend
✔ Choose your backend service to connect: · data-provider-custom-json-rest
✔ Do you want to use a UI Framework?: · chakra
✔ Do you want to add example pages?: · inferencer
✔ Do you need any Authentication logic?: · auth-provider-google
✔ Do you need i18n (Internationalization) support?: · no
✔ Choose a package manager: · npm

✔ Downloaded remote source successfully.
✔ Choose a project template · refine-vite
✔ What would you like to name your project?: · frontend
✔ Choose your backend service to connect: · data-provider-custom-json-rest
✔ Do you want to use a UI Framework?: · chakra
✔ Do you want to add example pages?: · inferencer
✔ Do you need any Authentication logic?: · auth-provider-google
✔ Do you need i18n (Internationalization) support?: · no
✔ Choose a package manager: · npm

When running npm run dev I get this error:

✘ [ERROR] Could not resolve "graphql"

    node_modules/graphql-tag/lib/index.js:2:22:
      2 │ import { parse } from 'graphql';
        ╵                       ~~~~~~~~~

  You can mark the path "graphql" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "graphql"

    node_modules/graphql-tag/lib/index.js:2:22:
      2 │ import { parse } from 'graphql';
        ╵                       ~~~~~~~~~

  You can mark the path "graphql" as external to exclude it from the bundle, which will remove this error.

I am not sure what depends on graphql, so i don't want to remove it. Seeing as this is just a simple refine app created from the official CLI, I am assuming this should work out of the box, but I may be wrong based on my configuration. Thanks!

5 replies

RRefine

•Created by fascinating-indigo on 8/28/2023 in #ask-any-question

Add Type to useForm

How do I make the object that I am manipulating, with the help of useForm hook, type safe? For instance, I know I can do things like:

<TextField
          {...register("email", {
            required: "This field is required",
            pattern: {
              value: /\S+@\S+\.\S+/,
              message: "Please enter a valid email address",
            },
          })}
          error={!!(errors as any)?.email}
          helperText={(errors as any)?.email?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="email"
          label={"Email"}
          name="email"
        />

<TextField
          {...register("email", {
            required: "This field is required",
            pattern: {
              value: /\S+@\S+\.\S+/,
              message: "Please enter a valid email address",
            },
          })}
          error={!!(errors as any)?.email}
          helperText={(errors as any)?.email?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="email"
          label={"Email"}
          name="email"
        />

But how do i ensure email is type-safe with respect to some interface? For instance, I have a user interface that I would like to apply to my useForm, so that way I make sure I only perform the proper useForm actions on the fields that exist for user

5 replies

RRefine

•Created by harsh-harlequin on 8/22/2023 in #ask-any-question

MUI Inferencer Can't Detect Object Inside Entity

5 replies

RRefine

•Created by absent-sapphire on 8/21/2023 in #ask-any-question

Error With MUI Inferencer

9 replies

RRefine

•Created by exotic-emerald on 8/19/2023 in #ask-any-question

How to Handle Routes for Resources that are Related

I have organizations that have many deployments and users, and deployments have many devices How sould I structure my resources routes in the <Refine> component under the resources property to handle this? Should I do something like for uses:

{
  name: "users",
  list: "/organizations/users",
  create: "/organizations/users/create",
  edit: "/organizations/users/edit/:id",
  meta: {
    label: "Users",
    icon: <GroupIcon />,
    canDelete: true,
  },
},

{
  name: "users",
  list: "/organizations/users",
  create: "/organizations/users/create",
  edit: "/organizations/users/edit/:id",
  meta: {
    label: "Users",
    icon: <GroupIcon />,
    canDelete: true,
  },
},

or should I do:

{
  name: "users",
  list: "/organizations/:id/users",
  create: "/organizations/:id/users/create",
  edit: "/organizations/:id/users/edit/:id",
  meta: {
    label: "Users",
    icon: <GroupIcon />,
    canDelete: true,
  },
},

{
  name: "users",
  list: "/organizations/:id/users",
  create: "/organizations/:id/users/create",
  edit: "/organizations/:id/users/edit/:id",
  meta: {
    label: "Users",
    icon: <GroupIcon />,
    canDelete: true,
  },
},

Can i use the same :id notifier, or does it need to be different if its used multiple times within the same route?

6 replies

RRefine

•Created by deep-jade on 8/19/2023 in #ask-any-question

Setup Relationships Between Resources for Inferencer

So my app has an organization resource and a deployment resource; deployments belong to an organization, and an organization can have many deployments. Now, when a user is creating a deployment, there needs to be a select dropdown where the user can select what organization this deployment belongs to. How can I establish this kind of relationship between resources so the inferencer can properly generate the create/edit forms for the deployment to allow this relationship?

18 replies

RRefine

•Created by conscious-sapphire on 8/19/2023 in #ask-any-question

Errors When Trying to Delete a Resource

Ok, so in my List view, I added column actions for each row, where one of the actions is to delete that row. I have my custom dataProvider setup with a deleteOne that takes in the parameters and sends out an API request to delete the request item. I have also enabled canDelete in my App For some reason though, when i click the delete action, I get the following errors in my console and deleteOne is never called:

TypeError: Cannot read properties of undefined (reading 'filter')
    at useDelete.ts:296:56
    at functionalUpdate (utils.ts:82:8)
    at QueryClient.setQueryData (queryClient.ts:218:18)
    at queryClient.ts:253:16
    at Array.map (<anonymous>)
    at queryClient.ts:251:10
    at Object.batch (notifyManager.ts:27:16)
    at QueryClient.setQueriesData (queryClient.ts:248:26)
    at Object.onMutate (useDelete.ts:290:33)
    at async Mutation.execute (mutation.ts:207:25)

TypeError: Cannot read properties of undefined (reading 'filter')
    at useDelete.ts:296:56
    at functionalUpdate (utils.ts:82:8)
    at QueryClient.setQueryData (queryClient.ts:218:18)
    at queryClient.ts:253:16
    at Array.map (<anonymous>)
    at queryClient.ts:251:10
    at Object.batch (notifyManager.ts:27:16)
    at QueryClient.setQueriesData (queryClient.ts:248:26)
    at Object.onMutate (useDelete.ts:290:33)
    at async Mutation.execute (mutation.ts:207:25)

and

TypeError: Cannot read properties of undefined (reading 'status')
    at Object.onError [as mutationFn] (authProvider.ts:77:24)
    at Object.fn (mutation.ts:179:31)
    at run (retryer.ts:147:31)
    at createRetryer (retryer.ts:204:5)
    at executeMutation (mutation.ts:174:22)
    at Mutation.execute (mutation.ts:216:26)

TypeError: Cannot read properties of undefined (reading 'status')
    at Object.onError [as mutationFn] (authProvider.ts:77:24)
    at Object.fn (mutation.ts:179:31)
    at run (retryer.ts:147:31)
    at createRetryer (retryer.ts:204:5)
    at executeMutation (mutation.ts:174:22)
    at Mutation.execute (mutation.ts:216:26)

32 replies

RRefine

•Created by correct-apricot on 8/18/2023 in #ask-any-question

404 Error Create Page

So I created a new route for my organizations for the create resource:

{
  name: "organizations",
  list: "/organizations",
  create: "/organizations/create",
  meta: {
    label: "Organizations",
    icon: <CorporateFareIcon />,
  },
},

{
  name: "organizations",
  list: "/organizations",
  create: "/organizations/create",
  meta: {
    label: "Organizations",
    icon: <CorporateFareIcon />,
  },
},

And I created a create.tsx file under my pages/organization folder, so it's at pages/organizations/create.tsx and this is the code for it:

import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { Create } from "@refinedev/mui";
import InputMask from "react-input-mask";

import FormControl from "@mui/material/FormControl";
import FormControlLabel from "@mui/material/FormControlLabel";
import Avatar from "@mui/material/Avatar";
import FormLabel from "@mui/material/FormLabel";
import Grid from "@mui/material/Grid";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import FormHelperText from "@mui/material/FormHelperText";
import type { TextFieldProps } from "@mui/material/TextField";

import { IOrganization } from "../../interfaces";

export const OrganizationCreate: React.FC<IResourceComponentsProps> = () => {
  const t = useTranslate();
  const {
    register,
    control,
    formState: { errors },
    saveButtonProps,
  } = useForm<IOrganization, HttpError, IOrganization>();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <form>
        <Grid
          container
          marginTop="8px"
          sx={{
            marginX: { xs: "0px" },
            paddingX: { xs: 1, md: 4 },
          }}
        >
          <Grid mb={1} item xs={12} md={4}>
            <Stack gap={1} justifyContent="center" alignItems="center">
             
              <Typography fontWeight="bold" variant="body2">
                {t("stores.selectLocation")}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={4}>
            <Stack gap="24px">
              <FormControl>
                <FormLabel
                  required
                  sx={{
                    marginBottom: "8px",
                    fontWeight: "700",
                    fontSize: "14px",
                    color: "text.primary",
                  }}
                >
                  {t("organization.fields.name")}
                </FormLabel>
                <TextField
                  {...register("name", {
                    required: t("errors.required.field", {
                      field: "Name",
                    }),
                  })}
                  size="small"
                  margin="none"
                  variant="outlined"
                />
                {errors.name && <FormHelperText error>{errors.name.message}</FormHelperText>}
              </FormControl>
              <FormControl>
                <FormLabel
                  required
                  sx={{
                    marginBottom: "8px",
                    fontWeight: "700",
                    fontSize: "14px",
                    color: "text.primary",
                  }}
                >
                  {t("organization.fields.description")}
                </FormLabel>
                <TextField {...register("desc", {})} size="small" margin="none" variant="outlined" />
              </FormControl>
            </Stack>
          </Grid>
        </Grid>
      </form>
    </Create>
  );
};

import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { Create } from "@refinedev/mui";
import InputMask from "react-input-mask";

import FormControl from "@mui/material/FormControl";
import FormControlLabel from "@mui/material/FormControlLabel";
import Avatar from "@mui/material/Avatar";
import FormLabel from "@mui/material/FormLabel";
import Grid from "@mui/material/Grid";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import FormHelperText from "@mui/material/FormHelperText";
import type { TextFieldProps } from "@mui/material/TextField";

import { IOrganization } from "../../interfaces";

export const OrganizationCreate: React.FC<IResourceComponentsProps> = () => {
  const t = useTranslate();
  const {
    register,
    control,
    formState: { errors },
    saveButtonProps,
  } = useForm<IOrganization, HttpError, IOrganization>();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <form>
        <Grid
          container
          marginTop="8px"
          sx={{
            marginX: { xs: "0px" },
            paddingX: { xs: 1, md: 4 },
          }}
        >
          <Grid mb={1} item xs={12} md={4}>
            <Stack gap={1} justifyContent="center" alignItems="center">
             
              <Typography fontWeight="bold" variant="body2">
                {t("stores.selectLocation")}
              </Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={4}>
            <Stack gap="24px">
              <FormControl>
                <FormLabel
                  required
                  sx={{
                    marginBottom: "8px",
                    fontWeight: "700",
                    fontSize: "14px",
                    color: "text.primary",
                  }}
                >
                  {t("organization.fields.name")}
                </FormLabel>
                <TextField
                  {...register("name", {
                    required: t("errors.required.field", {
                      field: "Name",
                    }),
                  })}
                  size="small"
                  margin="none"
                  variant="outlined"
                />
                {errors.name && <FormHelperText error>{errors.name.message}</FormHelperText>}
              </FormControl>
              <FormControl>
                <FormLabel
                  required
                  sx={{
                    marginBottom: "8px",
                    fontWeight: "700",
                    fontSize: "14px",
                    color: "text.primary",
                  }}
                >
                  {t("organization.fields.description")}
                </FormLabel>
                <TextField {...register("desc", {})} size="small" margin="none" variant="outlined" />
              </FormControl>
            </Stack>
          </Grid>
        </Grid>
      </form>
    </Create>
  );
};

But when i navigate to my organizations/create in my URL, I get a 404 error. But my organization list works just fine.

14 replies

RRefine

•Created by harsh-harlequin on 8/18/2023 in #ask-any-question

What type is error for onError within AuthProvider?

I have an onError function in my custom authProvider.ts:

onError: async (error) => {
    console.error("RECIEVED ERROR: ", error);
    return { error };
  },

onError: async (error) => {
    console.error("RECIEVED ERROR: ", error);
    return { error };
  },

But I would like to give the error a type so i can use it to handle various situations, what is the type that is used for this error that invokes this onError function?

21 replies

RRefine

•Created by grumpy-cyan on 8/18/2023 in #ask-any-question

Why does my List page generate so many queries?

16 replies

RRefine

•Created by rare-sapphire on 8/18/2023 in #ask-any-question

Problems Using Axios to Query from AWS API Gateway

6 replies

RRefine

•Created by foreign-sapphire on 8/17/2023 in #ask-any-question

Add Custom Fields to AuthPage

Here is the AuthPage for the Register Route, and I would like to add password confirmation so the user has to confirm their password, and I would also like to put an additional field that has the organization Id, since my users will need that when signing up.

<Route
                    path="/register"
                    element={
                      <AuthPage
                        type="register"
                        formProps={{
                          defaultValues: {
                            email: "demo@refine.dev",
                            password: "demodemo",
                          },
                        }}
                        
                      />
                    }
                  />

<Route
                    path="/register"
                    element={
                      <AuthPage
                        type="register"
                        formProps={{
                          defaultValues: {
                            email: "demo@refine.dev",
                            password: "demodemo",
                          },
                        }}
                        
                      />
                    }
                  />

How could I add that?

10 replies

Gaming

Programming