ianschmitz

ianschmitz

Maintainer of Create React App

Member Since 8 years ago

@retain-ai, Victoria, BC, Canada

Experience Points
183
follower
Lessons Completed
16
follow
Lessons Completed
328
stars
Best Reply Awards
37
repos

548 contributions in the last year

Pinned
⚡ Set up a modern web app by running one command.
⚡ React.lazy() with preload support!
⚡ MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
⚡ DEPRECATED - A Jest test environment for JSDOM 15
⚡ A Jest test environment for JSDOM 14
Activity
Jan
7
1 week ago
started
started time in 1 week ago
Dec
23
3 weeks ago
started
started time in 3 weeks ago
Dec
21
4 weeks ago
Dec
17
1 month ago
Dec
11
1 month ago
started
started time in 1 month ago
Dec
9
1 month ago
Activity icon
issue

ianschmitz issue comment hasura/graphql-engine

ianschmitz
ianschmitz

Support for Mac M1

Add Hasura Support for Mac M1

The Hasura Docker container does not work on the Mac M1 Docker preview.

When running it I get the following error:

WARNING: The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested

Is it possible to add a built for the linux/arm64/v8 platform?

Dec
8
1 month ago
push

ianschmitz push ianschmitz/react-hook-form

ianschmitz
ianschmitz

🪣 remove not valid example

ianschmitz
ianschmitz

🎳 eliminate some of the any type (#7210)

ianschmitz
ianschmitz

📏 shouldUseNativeValidation enable inject native validation attribute into field client & server (#7207)

  • server side validation

  • only apply to shouldUseNativeValidation

  • update test case for ssr for inline validation

  • reduce bundle size

  • combine props and include test coverage for getRuleValue func

  • remove as

  • update test snapshot

  • bundlesize improvement

  • compress more code footprint

  • Revert "compress more code footprint"

This reverts commit 9e205de45423eacd5ba1ce2c21f682c04b346bc1.

This reverts commit d70527e654e097bafbff8cdac97b310e73d8fa6e.

  • update deps

  • remove additional const

  • rename function

  • i blame the bloody bracket

ianschmitz
ianschmitz

❤️ thank you David Marr for helping the community

ianschmitz
ianschmitz

🇨🇳 document v7 in simplified Chinese (#7213)

ianschmitz
ianschmitz

🤦🏻‍♂️ fix #2717 regression with async field array actions (#7218)

ianschmitz
ianschmitz
ianschmitz
ianschmitz

🎮 close #7231 set deep nested value with controlled input via setValue (#7232)

ianschmitz
ianschmitz

Merge branch 'master' into patch-1

commit sha: 06cddab23f421cb15da89419bd4954b34101cb8f

push time in 1 month ago
Activity icon
issue

ianschmitz issue hasura/graphql-engine

ianschmitz
ianschmitz

Function argument aliases

Is your proposal related to a problem?

We're currently unable to alias function arguments to be more ergonomic to consumers by matching existing field conventions.

For example:

  • If i define a SQL function using camel case arguments, after creation the arguments will be lower case, which Hasura mirrors.
  • If i define a SQL function using snake case arguments, then it is inconsistent with other Hasura fields i've exposed which follow camel case convention

Describe the solution you'd like

Allow aliasing of function arguments (with the exception of the session argument), to create a more consistent public API

Describe alternatives you've considered

Don't have any.

If the feature is approved, would you be willing to submit a PR?

I don't think i have the Hasura expertise to pull this one off.

Dec
7
1 month ago
Activity icon
issue

ianschmitz issue comment i18next/react-i18next

ianschmitz
ianschmitz

Loading translations per component

🚀 Feature Proposal

I'm going to be honest, i'm not sure what the final API of something like this may look look like. That being said i've been using this pattern for quite a while now and it provides a fantastic developer experience (IMO), and keeps the translation files scoped at a component level which i've found easier to maintain. I would love to see this be supported first class within the React hook, most importantly within the TypeScript types of the UseTranslationResponse.

Motivation

As a React developer when developing a new feature i generally think at a component level. When introducing new language strings i typically consider:

Does this language string apply generally throughout the application, or is it specific to this component?

If it's generally applicable throughout the application, i add it to a common.lang.json file, otherwise i add it to a relative ComponentName.lang.json file alongside ComponentName.tsx. See my example below to get some more insight.

Example

Note there are a couple quirks with the types i defined in useTranslation.ts. The most common one i've noticed is when referring to common namespace such as t("common:something") it returns never, but component specific keys seem to have the correct return type.

Component.tsx

import i18n from "./i18n";
import useTranslation from "./useTranslation";
import resources from "./Component.lang.json";

export default function Component() {
  // See useTranslation.ts for impl. details to give strong types
  const { t } = useTranslation({ ns: "Component", resources });

  // Note that t() is type safe here. 
  // You can't refer to any other keys that aren't in `Component.lang.json` or `common.lang.json`.
  const componentSpecificString = t("foo");
  const commonString = t("common:bar");
}

i18n.ts:

import common from "./common.lang.json";

declare module "react-i18next" {
    interface CustomTypeOptions {
        defaultNS: "common";
        resources: {
            common: typeof common;
            [key: string]: Resources;
        };
    }
}

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        defaultNS: "common",
        fallbackLng: "en",
        resources: {
	      en: {
	          common,
	      },
	   }
    });

export default i18n;

useTranslation.ts:

import { StringMap, TFunctionResult, TOptions } from "i18next";
import { useMemo } from "react";
import {
    CustomTypeOptions,
    DefaultNamespace,
    DefaultResources,
    Resources,
    TFuncKey,
    TFuncReturn,
    useTranslation,
    UseTranslationResponse,
} from "react-i18next";

/**
 * A wrapper around {@link useTranslation} that adds language resources to the
 * `i18n` instance.
 * @param ns The namespace of the current component. This will be set as the
 * default namespace for the `t` function.
 * @param resources The language resources to add to the `i18n` instance.
 * Resources will be added to the provided namespace.
 * @returns The same return value of {@link useTranslation}, but strongly typed
 * to the available resource keys which are the provided resources, or the
 * common resources using a `common:` prefix.
 */
export function useTranslations<
    TCustomResources extends { [ns in N]: R } & DefaultResources,
    R extends Resources,
    N extends string = DefaultNamespace,
>(
    {
        ns,
        resources,
    }: {
        ns: N;
        resources: R;
    } = {
        ns: "" as N,
        resources: {} as R,
    },
) {
    // Modified type copied from react-i18next type for `t()`. This type
    // strongly types the `key` parameter.
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const trans: Omit<UseTranslationResponse<N, undefined>, "t"> & {
        t: <
            TKeys extends  // Default namespace (provided by `ns` param) doesn't need a prefix.
                | TFuncKey<N, undefined, TCustomResources>
                // Add in common namespace types which require `common:` prefix.
                | TFuncKey<[DefaultNS], undefined, TCustomResources>
                | TemplateStringsArray extends infer A
                ? A
                : never,
            TDefaultResult extends TFunctionResult = string,
            // eslint-disable-next-line @typescript-eslint/ban-types
            TInterpolationMap extends object = StringMap,
        >(
            key: TKeys | TKeys[],
            options?: TOptions<TInterpolationMap> | string,
        ) => TFuncReturn<N, TKeys, TDefaultResult, undefined, TCustomResources>;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } = useTranslation(ns) as any;

    useMemo(() => {
        if (ns) {
            trans.i18n.addResourceBundle("en", ns, resources, true, true);
        }
    }, [ns, resources, trans.i18n]);

    return trans;
}
ianschmitz
ianschmitz

More 1/2 than 3. The problem with 3 is likely just a slight issue in my custom types that i haven't got around to fixing yet.

I'm curious why 2 isn't possible? Isn't that essentially what i've demonstrated above?

Dec
3
1 month ago
Activity icon
issue

ianschmitz issue comment i18next/react-i18next

ianschmitz
ianschmitz

Loading translations per component

🚀 Feature Proposal

I'm going to be honest, i'm not sure what the final API of something like this may look look like. That being said i've been using this pattern for quite a while now and it provides a fantastic developer experience (IMO), and keeps the translation files scoped at a component level which i've found easier to maintain. I would love to see this be supported first class within the React hook, most importantly within the TypeScript types of the UseTranslationResponse.

Motivation

As a React developer when developing a new feature i generally think at a component level. When introducing new language strings i typically consider:

Does this language string apply generally throughout the application, or is it specific to this component?

If it's generally applicable throughout the application, i add it to a common.lang.json file, otherwise i add it to a relative ComponentName.lang.json file alongside ComponentName.tsx. See my example below to get some more insight.

Example

Note there are a couple quirks with the types i defined in useTranslation.ts. The most common one i've noticed is when referring to common namespace such as t("common:something") it returns never, but component specific keys seem to have the correct return type.

Component.tsx

import i18n from "./i18n";
import useTranslation from "./useTranslation";
import resources from "./Component.lang.json";

export default function Component() {
  // See useTranslation.ts for impl. details to give strong types
  const { t } = useTranslation({ ns: "Component", resources });

  // Note that t() is type safe here. 
  // You can't refer to any other keys that aren't in `Component.lang.json` or `common.lang.json`.
  const componentSpecificString = t("foo");
  const commonString = t("common:bar");
}

i18n.ts:

import common from "./common.lang.json";

declare module "react-i18next" {
    interface CustomTypeOptions {
        defaultNS: "common";
        resources: {
            common: typeof common;
            [key: string]: Resources;
        };
    }
}

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        defaultNS: "common",
        fallbackLng: "en",
        resources: {
	      en: {
	          common,
	      },
	   }
    });

export default i18n;

useTranslation.ts:

import { StringMap, TFunctionResult, TOptions } from "i18next";
import { useMemo } from "react";
import {
    CustomTypeOptions,
    DefaultNamespace,
    DefaultResources,
    Resources,
    TFuncKey,
    TFuncReturn,
    useTranslation,
    UseTranslationResponse,
} from "react-i18next";

/**
 * A wrapper around {@link useTranslation} that adds language resources to the
 * `i18n` instance.
 * @param ns The namespace of the current component. This will be set as the
 * default namespace for the `t` function.
 * @param resources The language resources to add to the `i18n` instance.
 * Resources will be added to the provided namespace.
 * @returns The same return value of {@link useTranslation}, but strongly typed
 * to the available resource keys which are the provided resources, or the
 * common resources using a `common:` prefix.
 */
export function useTranslations<
    TCustomResources extends { [ns in N]: R } & DefaultResources,
    R extends Resources,
    N extends string = DefaultNamespace,
>(
    {
        ns,
        resources,
    }: {
        ns: N;
        resources: R;
    } = {
        ns: "" as N,
        resources: {} as R,
    },
) {
    // Modified type copied from react-i18next type for `t()`. This type
    // strongly types the `key` parameter.
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const trans: Omit<UseTranslationResponse<N, undefined>, "t"> & {
        t: <
            TKeys extends  // Default namespace (provided by `ns` param) doesn't need a prefix.
                | TFuncKey<N, undefined, TCustomResources>
                // Add in common namespace types which require `common:` prefix.
                | TFuncKey<[DefaultNS], undefined, TCustomResources>
                | TemplateStringsArray extends infer A
                ? A
                : never,
            TDefaultResult extends TFunctionResult = string,
            // eslint-disable-next-line @typescript-eslint/ban-types
            TInterpolationMap extends object = StringMap,
        >(
            key: TKeys | TKeys[],
            options?: TOptions<TInterpolationMap> | string,
        ) => TFuncReturn<N, TKeys, TDefaultResult, undefined, TCustomResources>;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } = useTranslation(ns) as any;

    useMemo(() => {
        if (ns) {
            trans.i18n.addResourceBundle("en", ns, resources, true, true);
        }
    }, [ns, resources, trans.i18n]);

    return trans;
}
ianschmitz
ianschmitz

@pedrodurek i don't quite follow. I don't see the overlap in your link and what i proposed. Perhaps i missed something?

Dec
2
1 month ago
Activity icon
issue

ianschmitz issue comment react-hook-form/react-hook-form

ianschmitz
ianschmitz

[Bug]: Controller in a FieldArray results in memory leak warning

Version Number

7.17.2

Codesandbox/Expo snack

https://codesandbox.io/s/upbeat-payne-0q3r5

Steps to reproduce

  1. Go to https://codesandbox.io/s/upbeat-payne-0q3r5
  2. Click on "Add Field"
  3. Click on "Reset"
  4. Click on "Add Field" a second time
  5. See error in console about update on an unmounted component

Notes:

  • the error is similar to 6731
  • it occurs when using a Controller with a material ui field in a FieldArray

Thanks!

Expected behaviour

Functionality is correct, however the memory leak should not occur.

What browsers are you seeing the problem on?

FF, Chrome

Relevant log output

index.js:27 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at Controller (https://0q3r5.csb.app/node_modules/react-hook-form/dist/index.esm.js:287:35)
    at div 
    in Controller (created by App)
    in App

Code of Conduct

  • I agree to follow this project's Code of Conduct
ianschmitz
ianschmitz

will be released in the next minor, you shouldn't have to worry about this warning for your product. 👍

That's fair, however in unit/integration tests it can be common to force tests to fail when console errors or warnings are logged via https://www.npmjs.com/package/jest-fail-on-console or other mechanisms.

Dec
1
1 month ago
pull request

ianschmitz pull request react-hook-form/react-hook-form

ianschmitz
ianschmitz

ReactNode Controller render prop return type

ReactElement excludes null as a valid return type from the render prop. However null is used in the docs samples to conditionally render fields from useFieldArray.

https://codesandbox.io/s/usefieldarray-virtual-input-v9wyw?file=/src/App.js:402-510

push

ianschmitz push ianschmitz/react-hook-form

ianschmitz
ianschmitz

ReactNode Controller render prop return type

ReactElement excludes null as a valid return type from the render prop. However null is used in the docs samples to conditionally render fields from useFieldArray.

https://codesandbox.io/s/usefieldarray-virtual-input-v9wyw?file=/src/App.js:402-510

commit sha: 466c5efcbc28f0b5f599ef94129e357a3b3a4197

push time in 1 month ago
Activity icon
fork

ianschmitz forked react-hook-form/react-hook-form

⚡ 📋 React Hooks for form state management and validation (Web + React Native)
ianschmitz MIT License Updated
fork time in 1 month ago
Activity icon
issue

ianschmitz issue i18next/react-i18next

ianschmitz
ianschmitz

Loading translations per component

🚀 Feature Proposal

I'm going to be honest, i'm not sure what the final API of something like this may look look like. That being said i've been using this pattern for quite a while now and it provides a fantastic developer experience (IMO), and keeps the translation files scoped at a component level which i've found easier to maintain. I would love to see this be supported first class within the React hook, most importantly within the TypeScript types of the UseTranslationResponse.

Motivation

As a React developer when developing a new feature i generally think at a component level. When introducing new language strings i typically consider:

Does this language string apply generally throughout the application, or is it specific to this component?

If it's generally applicable throughout the application, i add it to a common.lang.json file, otherwise i add it to a relative ComponentName.lang.json file alongside ComponentName.tsx. See my example below to get some more insight.

Example

Note there are a couple quirks with the types i defined in useTranslation.ts. The most common one i've noticed is when referring to common namespace such as t("common:something") it returns never, but component specific keys seem to have the correct return type.

Component.tsx

import i18n from "./i18n";
import useTranslation from "./useTranslation";
import resources from "./Component.lang.json";

export default function Component() {
  // See useTranslation.ts for impl. details to give strong types
  const { t } = useTranslation({ ns: "Component", resources });

  // Note that t() is type safe here. 
  // You can't refer to any other keys that aren't in `Component.lang.json` or `common.lang.json`.
  const componentSpecificString = t("foo");
  const commonString = t("common:bar");
}

i18n.ts:

import common from "./common.lang.json";

declare module "react-i18next" {
    interface CustomTypeOptions {
        defaultNS: "common";
        resources: {
            common: typeof common;
            [key: string]: Resources;
        };
    }
}

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        defaultNS: "common",
        fallbackLng: "en",
        resources: {
	      en: {
	          common,
	      },
	   }
    });

export default i18n;

useTranslation.ts:

import { StringMap, TFunctionResult, TOptions } from "i18next";
import { useMemo } from "react";
import {
    CustomTypeOptions,
    DefaultNamespace,
    DefaultResources,
    Resources,
    TFuncKey,
    TFuncReturn,
    useTranslation,
    UseTranslationResponse,
} from "react-i18next";

/**
 * A wrapper around {@link useTranslation} that adds language resources to the
 * `i18n` instance.
 * @param ns The namespace of the current component. This will be set as the
 * default namespace for the `t` function.
 * @param resources The language resources to add to the `i18n` instance.
 * Resources will be added to the provided namespace.
 * @returns The same return value of {@link useTranslation}, but strongly typed
 * to the available resource keys which are the provided resources, or the
 * common resources using a `common:` prefix.
 */
export function useTranslations<
    TCustomResources extends { [ns in N]: R } & DefaultResources,
    R extends Resources,
    N extends string = DefaultNamespace,
>(
    {
        ns,
        resources,
    }: {
        ns: N;
        resources: R;
    } = {
        ns: "" as N,
        resources: {} as R,
    },
) {
    // Modified type copied from react-i18next type for `t()`. This type
    // strongly types the `key` parameter.
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const trans: Omit<UseTranslationResponse<N, undefined>, "t"> & {
        t: <
            TKeys extends  // Default namespace (provided by `ns` param) doesn't need a prefix.
                | TFuncKey<N, undefined, TCustomResources>
                // Add in common namespace types which require `common:` prefix.
                | TFuncKey<[DefaultNS], undefined, TCustomResources>
                | TemplateStringsArray extends infer A
                ? A
                : never,
            TDefaultResult extends TFunctionResult = string,
            // eslint-disable-next-line @typescript-eslint/ban-types
            TInterpolationMap extends object = StringMap,
        >(
            key: TKeys | TKeys[],
            options?: TOptions<TInterpolationMap> | string,
        ) => TFuncReturn<N, TKeys, TDefaultResult, undefined, TCustomResources>;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } = useTranslation(ns) as any;

    useMemo(() => {
        if (ns) {
            trans.i18n.addResourceBundle("en", ns, resources, true, true);
        }
    }, [ns, resources, trans.i18n]);

    return trans;
}
Nov
28
1 month ago
Activity icon
delete

ianschmitz in ianschmitz/material-ui delete branch textfield-default-id

deleted time in 1 month ago
Nov
27
1 month ago
started
started time in 1 month ago
Nov
25
1 month ago
pull request

ianschmitz pull request mui-org/material-ui

ianschmitz
ianschmitz

[TextField] Generate id automatically

It's been a while! 👋

I remember proposing this change a few years back and think it was generally well received? Unfortunately it never went anywhere, and I don't remember why. Anyways I thought i'd try again as i think it's a good usability improvement for everyone!

The change here is to generate an id using useId for the TextField component if one wasn't provided in the props. An id is required to link up the label, input, and helper text elements all together for a11y purposes.

Benefits:

  • Accessible out-of-the-box 🎉
  • Developers don't have to worry about generating unique ids to keep their TextField's a11y. They can still provide one if they choose though!

Drawbacks:

  • I can't think of any. Can you folks?
push

ianschmitz push ianschmitz/material-ui

ianschmitz
ianschmitz

Generate TextField id when not provided

commit sha: bc88e513c1ed847ef784e59ef1f0e55ed7955e0d

push time in 1 month ago
Activity icon
created branch

ianschmitz in ianschmitz/material-ui create branch textfield-default-id

createdAt 1 month ago
push

ianschmitz push ianschmitz/material-ui

ianschmitz
ianschmitz

[Autocomplete] Move useAutocomplete to the Unstyled package (#27485)

ianschmitz
ianschmitz

[website] Add Flavien to team and about pages (#27575)

ianschmitz
ianschmitz

[docs] Use the same h2 for the customization demos (#27569)

ianschmitz
ianschmitz
ianschmitz
ianschmitz

[docs] Remove backticks in the title (#27567)

ianschmitz
ianschmitz

[codemod] Add support for createStyles usage in jss-to-styled (#27578)

ianschmitz
ianschmitz

[examples] Update create-react-app examples with styled-components to use package aliases (#27591)

ianschmitz
ianschmitz

[TextField] Use deprecatedPropType on the deprecated props (#27503)

ianschmitz
ianschmitz
ianschmitz
ianschmitz

[docs] Bring back Select#onChange signature API (#27443)

ianschmitz
ianschmitz

[docs] Hardcode listed colors in /customization/color/#27446)

ianschmitz
ianschmitz

[Modal] Restore overflowX and overflowY styles (#27487)

Co-authored-by: eps1lon [email protected]

ianschmitz
ianschmitz

[examples] Fix nextjs with styled-components example (#27583)

ianschmitz
ianschmitz

[docs] Add TypeScript guide for the sx prop (#27417)

ianschmitz
ianschmitz

[Autocomplete] Move useAutocomplete to the Unstyled package - part 2 (#27524)

Co-authored-by: Olivier Tassinari [email protected]

ianschmitz
ianschmitz

[website] Add spicefactory as gold sponsor

ianschmitz
ianschmitz

[website] Add spicefactory as gold sponsor

ianschmitz
ianschmitz

Added top, left, right and bottom border color CSS properties to system (#27580)

ianschmitz
ianschmitz

[codemod] Fix jss-to-styled codemod to handle React.Fragment as root (#27495)

ianschmitz
ianschmitz

[docs] Fix layout shift when opening hash anchor (#27619)

[docs] Fix layout shift when opening hash anchor (#27619)

commit sha: e4618dc8abd01a9214a2b6faafdadae3d5f54d20

push time in 1 month ago
Nov
10
2 months ago
Activity icon
issue

ianschmitz issue react-hook-form/react-hook-form

ianschmitz
ianschmitz

issue: Fast refresh breaks form elements

Version Number

7.19.1

Codesandbox/Expo snack

https://codesandbox.io/s/lucid-wood-cfurh?file=/src/App.tsx

Steps to reproduce

  1. Type a value into the input
  2. Edit the App.tsx file in some way to trigger a recompile/fast refresh, such as by adding a new line in the file
  3. Try typing in the input again
  4. Notice the controlled input is no longer functional

Expected behaviour

Controlled form elements continue to work after a fast refresh.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct
Nov
9
2 months ago
Activity icon
issue

ianschmitz issue mujo-code/puppeteer-headful

ianschmitz
ianschmitz

Marketplace shows 12.3.1 as latest version

https://github.com/marketplace/actions/puppeteer-headful

This caught us since this old version uses Node 12, where as the v2 tag uses Node 16. I wonder if we could delete the 12.3.1 tag and maybe the marketplace will pick up v2 as latest?

https://github.com/mujo-code/puppeteer-headful/tags

Nov
6
2 months ago
Activity icon
issue

ianschmitz issue comment lima-vm/lima

ianschmitz
ianschmitz

Host hostname

I realize the title is confusing 😛 . Sorry if there's a better forum for questions. I didn't see GitHub discussions enabled on this repo.

Coming from docker desktop, the recommended pattern when wanting to refer to HTTP URLs on the macOS host was to use host.docker.internal. I'm wondering if there's something similar in the Lima world?

A concrete example is running a Postgres instance using Postgres.app and wanting to connect to it from a container running in Lima.

ianschmitz
ianschmitz

We define host.lima.internal to point to the host from inside the VM.

Wonderful. I'll give that a try. I had looked through the docs and didn't find this (sorry if I missed!) - so may be good to document it?

Cheers

Activity icon
issue

ianschmitz issue lima-vm/lima

ianschmitz
ianschmitz

Host hostname

I realize the title is confusing 😛 . Sorry if there's a better forum for questions. I didn't see GitHub discussions enabled on this repo.

Coming from docker desktop, the recommended pattern when wanting to refer to HTTP URLs on the macOS host was to use host.docker.internal. I'm wondering if there's something similar in the Lima world?

A concrete example is running a Postgres instance using Postgres.app and wanting to connect to it from a container running in Lima.

Nov
5
2 months ago
Activity icon
issue

ianschmitz issue lima-vm/lima

ianschmitz
ianschmitz

Host hostname

I realize the title is confusing 😛 . Sorry if there's a better forum for questions. I didn't see GitHub discussions enabled on this repo.

Coming from docker desktop, the recommended pattern when wanting to refer to HTTP URLs on the macOS host was to use host.docker.internal. I'm wondering if there's something similar in the Lima world?

A concrete example is running a Postgres instance using Postgres.app and wanting to connect to it from a container running in Lima.

started
started time in 2 months ago
Oct
30
2 months ago
Activity icon
issue

ianschmitz issue comment mswjs/msw

ianschmitz
ianschmitz

GraphQL POST request parsing fails with string body

Environment

Name Version
msw 0.35.0
node 14.17.3
OS macOS 11.6

Request handlers

// Example of declaration. Provide your code here.
import { setupServer } from 'msw/node'
import { rest } from 'msw'

const server = setupServer(
   graphql.query(
            "MyActivityTagUsagesLast",
            (req, res, ctx) => {
                return res(
                    ctx.data({
                        ...
                    }),
                );
            },
        )
)

server.listen()

Actual request

// Example of making a request. Provide your code here.
const res = await fetch("/v1/graphql", {
    method: "POST",
      body: JSON.stringify({ query, variables }),
    });

Current behavior

GraphQL requests are not being intercepted. During debugging i traced it back to this check here that expects the body to be an object, not a string: https://github.com/mswjs/msw/blob/a9085a670d03401a8e7ed05547ba2e5af09c401f/src/utils/internal/parseGraphQLRequest.ts#L102

However what is being checked by MSW looks like the following - note the body is a string:

{
  "id": "9a3588f2-9da0-44cb-b9c8-b4f3de113353",
  "url": "http://localhost/v1/graphql",
  "method": "POST",
  "body": "{\"query\":\"\\n    query MyActivityTagUsagesLast($employeeId: bigint!) {\\n  tagUsages(\\n    where: {employee: {id: {_eq: $employeeId}}}\\n    order_by: {date: desc}\\n    limit: 1\\n  ) {\\n    date\\n  }\\n}\\n    \",\"variables\":{\"employeeId\":1}}",
  "headers": {
    "_headers": {
      "content-type": "text/plain;charset=UTF-8",
      "x-msw-request-id": "9a3588f2-9da0-44cb-b9c8-b4f3de113353",
      "cookie": ""
    },
    "_names": {}
  },
  "cookies": {},
  "redirect": "manual",
  "referrer": "",
  "keepalive": false,
  "cache": "default",
  "mode": "cors",
  "referrerPolicy": "no-referrer",
  "integrity": "",
  "destination": "document",
  "bodyUsed": false,
  "credentials": "same-origin"
}

Expected behavior

Expected string body to work as expected as this is the recommended way to send JSON in the body of a POST request using fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_json_data

Screenshots

ianschmitz
ianschmitz

That's what i get for debugging late on a Friday 🤪

Since i was using GraphQL Code Generator with the typescript-react-query plugin, i had to add this to my codegen config:

"fetchParams": "{ headers: {\"Content-Type\": \"application/json\"} }"

I hadn't noticed this previously since my GraphQL endpoint (Hasura) worked fine with a text/plain Content-Type.

Activity icon
issue

ianschmitz issue mswjs/msw

ianschmitz
ianschmitz

GraphQL POST request parsing fails with string body

Environment

Name Version
msw 0.35.0
node 14.17.3
OS macOS 11.6

Request handlers

// Example of declaration. Provide your code here.
import { setupServer } from 'msw/node'
import { rest } from 'msw'

const server = setupServer(
   graphql.query(
            "MyActivityTagUsagesLast",
            (req, res, ctx) => {
                return res(
                    ctx.data({
                        ...
                    }),
                );
            },
        )
)

server.listen()

Actual request

// Example of making a request. Provide your code here.
const res = await fetch("/v1/graphql", {
    method: "POST",
      body: JSON.stringify({ query, variables }),
    });

Current behavior

GraphQL requests are not being intercepted. During debugging i traced it back to this check here that expects the body to be an object, not a string: https://github.com/mswjs/msw/blob/a9085a670d03401a8e7ed05547ba2e5af09c401f/src/utils/internal/parseGraphQLRequest.ts#L102

However what is being checked by MSW looks like the following - note the body is a string:

{
  "id": "9a3588f2-9da0-44cb-b9c8-b4f3de113353",
  "url": "http://localhost/v1/graphql",
  "method": "POST",
  "body": "{\"query\":\"\\n    query MyActivityTagUsagesLast($employeeId: bigint!) {\\n  tagUsages(\\n    where: {employee: {id: {_eq: $employeeId}}}\\n    order_by: {date: desc}\\n    limit: 1\\n  ) {\\n    date\\n  }\\n}\\n    \",\"variables\":{\"employeeId\":1}}",
  "headers": {
    "_headers": {
      "content-type": "text/plain;charset=UTF-8",
      "x-msw-request-id": "9a3588f2-9da0-44cb-b9c8-b4f3de113353",
      "cookie": ""
    },
    "_names": {}
  },
  "cookies": {},
  "redirect": "manual",
  "referrer": "",
  "keepalive": false,
  "cache": "default",
  "mode": "cors",
  "referrerPolicy": "no-referrer",
  "integrity": "",
  "destination": "document",
  "bodyUsed": false,
  "credentials": "same-origin"
}

Expected behavior

Expected string body to work as expected as this is the recommended way to send JSON in the body of a POST request using fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_json_data

Screenshots

Oct
26
2 months ago
Previous