小编Ale*_*min的帖子

有人可以提供一个使用 Apollo Client 3.0 字段策略实现的分页示例。我一直在按照文档中的示例来实现无限滚动，但在我的控制台中，我收到以下警告：

The updateQuery callback for fetchMore is deprecated, and will be removed
in the next major version of Apollo Client.

Please convert updateQuery functions to field policies with appropriate
read and merge functions, or use/adapt a helper function (such as
concatPagination, offsetLimitPagination, or relayStylePagination) from
@apollo/client/utilities.

The field policy system handles pagination more effectively than a
hand-written updateQuery function, and you only need to define the policy
once, rather than every time you call fetchMore.

我对阿波罗相当陌生，我真的不知道如何以 …

我有一个TextField连接到的元素react-hook-form。当我专注于该输入时，我会打开一个国家/地区列表，以便我可以选择一个国家/地区，通过 中的setValue函数将其电话代码填充到该字段中react-hook-form。

一切正常，国家/地区代码确实出现在字段中，但手动输入文本时通常向上移动的标签不会向上移动。

这是它的样子

如果第二个查询需要第一个查询返回的参数，那么链接查询的正确方法是什么？

const { data: user } = useGetUserQuery();

用户对象包含一个用于运行的ID

const { data: userBio} = useGetUserBioQuery(user.id);

如何确保第二个仅在第一个完成后运行？

我正在尝试构建一个拦截器，以应对 RTK 查询访问令牌无效的情况。我已经通过文档中的示例构建了它，如下所示：

const baseQuery = fetchBaseQuery({
    baseUrl: BASE_URL,
    prepareHeaders: (headers, { getState }) => {
        const {
            auth: {
                user: { accessToken },
            },
        } = getState() as RootState;
        if (accessToken) {
            headers.set('authorization', `Bearer ${accessToken}`);
        }
        return headers;
    },
});

const baseQueryWithReauth: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
    args,
    api,
    extraOptions
) => {
    let result = await baseQuery(args, api, extraOptions);

    if (result.error && result.error.status === 401) {
        const refreshResult = await baseQuery('token/refresh/', api, extraOptions);

        if (refreshResult.data) …

我正在研究 React PWA，我想知道是否可以动态地将图标 URL 添加到文件中manifest.json。所以我的目标是显示通用应用程序图标，直到用户登录。之后，我从远程 API 请求一个新图标并将其设置到清单文件，以便更改仪表板上的图标和移动图标。理想情况下，我希望在不进行任何后端更改的情况下实现这一点

我最近刚刚开始学习 GraphQL 和 React-Apollo，我想知道如果我需要在同一个组件中使用useQuery和挂钩，推荐的使用方法是什么。useMutation由于两个钩子都返回{data, loading, error}对象，因此名称存在冲突。我应该在解构时为属性分配唯一的名称，还是将逻辑移动到单独的容器组件更好？

我正在构建一个具有自动完成功能的搜索模式，我最终想要实现的是能够通过姓名或 ID 来搜索人员。但是，当您从建议中选择一个人并且名称进入输入字段时，我不希望显示 ID（原因是真实的 ID 会很长并且看起来很难看）。这是为了更好地理解该问题的屏幕截图

当我从建议中选择一个选项时，我不希望出现数字 6。

这是我的自动完成代码

 <Autocomplete
        multiple
        id="tags-outlined"
        options={students}
        onInputChange={(event) => event.target}
        getOptionLabel={({ firstName, lastName, id }) =>
          `${firstName} ${lastName} ${id}`
        }
        filterSelectedOptions
        renderOption={({ firstName, lastName, id }) => {
          return (
            <div>
              <div>
                {`${firstName} `}
                {lastName}
              </div>
              <span>{id}</span>
            </div>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            className={classes.input}
            variant="outlined"
            label="Name or Student ID"
          />
        )}
      />

我用来react-hook-form控制我的表单输入（ChakraUI 输入）并禁用“提交”按钮以防输入无效

由于我FormProvider在父组件中使用了多页表单，因此根据当前页面更改验证架构

   const currentValidationSchema = validationSchema[activeStep];

    const methods = useForm({
        mode: 'all',
        defaultValues: DEFAULT_VALUES,
        resolver: yupResolver(currentValidationSchema),
    });

 <FormProvider {...methods}>
    <Box >{renderCurrentStep(activeStep)}</Box>
  </FormProvider>

useFormContext并在子组件中使用它

    const {
        control,
        watch,
        getValues,
        clearErrors,
        setError,
        setValue,
        formState: { errors, isValid },
    } = useFormContext<IOrderProductFormData>();

    <Controller
        control={control}
        name="phoneNumber"
        render={({ field: { onChange, value } }) => {
            return (
                <InputMask
                    mask="999 99 999"
                    onChange={onChange}
                    maskChar=" "
                    value={value}
                >
                    {(inputProps: any) => (
                        <InputGroup variant="phone">
                            <InputLeftAddon>+1</InputLeftAddon>
                            <Input
                                type="tel"
                                ref={inputRef}
                                aria-label="phone-number"
                                data-testid="phone-number" …

ReferenceError: Cannot access 'authReducer' before initialization我在使用Reduxwithredux-toolkit和 时遇到错误redux-persist

combineReducers我有 3 个减速器，我将它们合并在一起redux-toolkit。然后我正在配置存储，将其中一个减速器持久保存到localStorage. 当我运行该应用程序时，我看到上面提到的错误消息，它指向authSlice，如果我将其注释掉，错误消息就会消失，我就能够成功运行该应用程序。我的问题是，我无法弄清楚为什么错误会专门出现，authSlice因为它或多或少与其他减速器相同。

import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { useDispatch } from "react-redux";
import { rootReducer } from "./rootReducer";

const persistConfig = {
  key: "root",
  storage: storage,
  whitelist: ["user"],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer, …

我在 Safari 浏览器上遇到了一个问题，我的 Material UI Grid 容器没有在它的边界内保存它的 Grid 项目元素。这似乎只是 Safari 浏览器的问题。

这是我的页面代码。

<Grid
      item
      container
      direction="column"
      justify="space-between"
      className={classes.questionContainer}
    >
      <Grid item>
        <Typography component="h1" variant="h1">
          {question.text}
        </Typography>
      </Grid>

      <Grid
        item
        container
        xs={12}
        justify="flex-start"
        className={classes.btnBlock}
      >
        <Grid item xs={3} className={classes.btnContainer}>
          <Button
            variant="outlined"
            color="primary"
            className={classes.btn}
          >
            {customButtonTitle1 || 'Yes'}
          </Button>
        </Grid>
        <Grid item xs={3} className={classes.btnContainer}>
          <Button
            variant="outlined"
            color="primary"
            className={classes.btn}
          >
            {customButtonTitle2 || 'No'}
          </Button>
        </Grid>
          <Grid item xs={3} className={classes.btnContainer}>
            <Button
              variant="outlined"
              color="primary"
              className={classes.btn}
            >
              {customButtonTitle3}
            </Button>
          </Grid>
      </Grid>
    </Grid>

const useStyles = makeStyles((theme: …