MiroslavPetrik Github contribution chart
MiroslavPetrik Github Stats
MiroslavPetrik Most Used Languages

Activity

13 Sep 2022

MiroslavPetrik

started

Started On 13 Sep 2022 at 08:04:54

MiroslavPetrik

Update parameters.rst

Pushed On 11 Sep 2022 at 11:47:17

MiroslavPetrik

Fix typo in phoenix_github_oauth.rst

Created On 10 Sep 2022 at 09:51:48

MiroslavPetrik

Update phoenix_github_oauth.rst

Pushed On 10 Sep 2022 at 09:51:33

MiroslavPetrik

Fix typo

Created On 10 Sep 2022 at 11:41:30

MiroslavPetrik

Fix typo

Pushed On 10 Sep 2022 at 11:41:09

MiroslavPetrik

A graph-relational database with declarative schema, built-in migration system, and a next-generation query language

Forked On 10 Sep 2022 at 11:39:26

MiroslavPetrik

started

Started On 08 Sep 2022 at 07:34:23

MiroslavPetrik

started

Started On 02 Sep 2022 at 04:30:53
Issue Comment

MiroslavPetrik

useBreakpointValue causes re-renders

Description

When using useBreakpointValue you get multiple re-renders on first render, even when the value does not change.

Link to Reproduction

https://codesandbox.io/s/usebreakpointvalue-renders-vg2khe

This basic example sees 3 renders on first render, and any resizing between breakpoints causes 2 renders. I've removed the code for running in strictmode since that would be misleading in counting the number of renders. I've also used React devtools to verify that it renders again because "Hook 1 changed", which is the useState() inside useMediaQuery(). It also renders a third time because "context changed" which I'm not entirely sure why?

Steps to reproduce

  1. Use useBreakpointValue() in a component
  2. This component will re-render at least once on initial load

Chakra UI Version

@chakra-ui/react@2.2.4

Browser

Chrome Version 103.0.5060.134 (Official Build) (64-bit)

Operating System

  • [ ] macOS
  • [X] Windows
  • [ ] Linux

Additional Information

I'd say the main problem is that any component using the useBreakpointValue() hook will render at least twice. This is somewhat made worse by the fact that the first of these two renders always uses the fallback value, even when running purely in browser.

This is essentially a re-open of https://github.com/chakra-ui/chakra-ui/issues/4267

Workaround

I think the workaround currently is to

  • Probably always use memo() for anything relying on breakpoint-values. Remember memo uses referential equality by default, either define other methods for checking the diff, or only use primitive breakpoint values to make sure memorization works as expected.

  • Make sure you define what breakpoint to use as a fallback in the second argument to reduce the number of times your memoized component renders. Either make sure your fallback to match your expected most common platform, or populate it with information from use-agent or similiar.

    const value = useBreakpointValue({ base: 'green', lg: 'blue' }, { fallback: 'lg' }) 
  • If you're not using Server-Side Rendering, you should also pass ssr: false to ensure the first value is actual mediaqueried and not just the fallback.

    const value = useBreakpointValue({ base: 'green', lg: 'blue' }, { ssr: false }) 

Forked On 18 Aug 2022 at 02:33:33

MiroslavPetrik

lets use this https://github.com/streamich/react-use/blob/master/docs/createBreakpoint.md

Commented On 18 Aug 2022 at 02:33:33
Issue Comment

MiroslavPetrik

useBreakpointValue mock issues, changed with 2.2.5/6

Description

Starting with 2.2.5 my ability to mock useBreakpointValue has become problematic, for now stuck on 2.2.4

Link to Reproduction

None

Steps to reproduce

Previous to 2.2.5, I was mocking useBreakpointValue via an import of @chakra-ui/media-query. This was the way I found I needed to do it to work. I'm sure there are other ways, but I could not import the hook directly from @chakra-ui/react

import * as mediaQueryHooks from '@chakra-ui/media-query';

beforeAll(() => {
  mockUseBreakpoint = jest.spyOn(mediaQueryHooks, 'useBreakpointValue').mockImplementation(() => {
    return true;
  });
}); 

In 2.2.5 that became an issue as the module disappeared

In 2.2.6 it seems to have reappeared, but I cannot mock it

I suspect there is a better way to be mocking useBreakpointValue that I do not know of, but the way I've been using seems broken.

Any help?

Chakra UI Version

2.2.5+

Browser

Unit tests

Operating System

  • [X] macOS
  • [ ] Windows
  • [ ] Linux

Additional Information

No response

Forked On 18 Aug 2022 at 02:33:19

MiroslavPetrik

Hey use this https://github.com/streamich/react-use/blob/master/docs/createBreakpoint.md

Commented On 18 Aug 2022 at 02:33:19

MiroslavPetrik

Fix example

Pushed On 16 Aug 2022 at 06:25:57

MiroslavPetrik

link repository

Pushed On 16 Aug 2022 at 06:18:59

MiroslavPetrik

A helper to easily extend a component with a render function prop type

On 16 Aug 2022 at 06:14:35

MiroslavPetrik

A helper to easily extend a component with a render function prop type

On 16 Aug 2022 at 06:12:42

MiroslavPetrik

started

Started On 10 Aug 2022 at 07:41:39

MiroslavPetrik

Custom Types Returned from Directives Not Working

Describe the bug

Our app uses a custom @email directive that does some extra validation and returns a type of Email

export class EmailType extends GraphQLScalarType {
  constructor(type: GraphQLScalarType) {
    super({
      name: 'Email',
      parseValue: (value) => {
        if (!validateEmail(value)) {
          throw new UserInputError('Email address failed validation');
        }

        return type.parseValue(value);
      },
      serialize: (value) => type.serialize(value),
      parseLiteral: (ast) => {
        if (ast.kind === Kind.STRING && !validateEmail(ast.value)) {
          throw new UserInputError('Email address failed validation');
        }

        return type.parseLiteral(ast, {});
      },
    });
  }
} 

Our schema is defined like this:

input UserInput {
  email: String! @email
  firstName: String!
  lastName: String!
} 

Codegen outputs types that look like:

export type CreateUserInput = {
  email: Scalars['String'];
  firstName: Scalars['String'];
  lastName: Scalars['String'];
}; 

This makes sense because it's the custom directive javascript code that returns the Email type.

Our problem is we use Apollo Studio and ApolloServerPluginSchemaReporting to report our schema to Apollo Studio. Apollo while running evaluates our UserInputType as:

input UserInput {
  email: Email
  firstName: String!
  lastName: String!
}; 

However in CI when we do schema validation we get failures because our graphql-codgen schema shows those types as simplyString and not type Email

I've done a lot of digging and I can't seem to find a proper way to remedy this. Can codegen convert @email directives to the correct interpolated type?

  1. My GraphQL schema:
input UserInput {
  email: String! @email
  firstName: String!
  lastName: String!
} 
  1. My codegen.yml config file:
schema:
  - 'src/graphql/**/schema.ts'
  - 'src/graphql/**/regexp.ts'
  - 'src/graphql/directives/email.ts'
  - 'src/graphql/directives/length.ts'
generates:
  src/graphql/generated/graphql.ts:
    config:
      contextType: '@graphql/index#Context'
      enumsAsTypes: true
      noSchemaStitching: true
      # https://graphql-code-generator.com/docs/plugins/typescript-resolvers#mappers---overwrite-parents-and-resolved-values
      scalars:
        Cursor: ../scalar_types#Cursor
        Date: ../scalar_types#DayString
        DateTime: ../scalar_types#DateTimeString
        PositiveFloat: ../scalar_types#PositiveFloat
        PositiveInt: ../scalar_types#PositiveInt
        NonNegativeFloat: ../scalar_types#NonNegativeFloat
        NonNegativeInt: ../scalar_types#NonNegativeInt
        RegExp: RegExp
      useIndexSignature: true
    plugins:
      - add: |
          /* eslint-disable */
          /* THIS IS A GENERATED FILE, DO NOT EDIT. */
      - 'typescript'
      - 'typescript-resolvers'
  src/graphql/generated/schema.graphql:
    plugins:
      - schema-ast
    config:
      includeDirectives: true
  src/graphql/generated/schema.json:
    plugins:
      - introspection
    config:
      minify: false 

Forked On 09 Aug 2022 at 02:22:33

MiroslavPetrik

I think this issue is not solved and should be reopened.

I had the same problem with the package graphql-constraint-directive

E.g. for minimal input for a hello world query:

type Query {
  hello(name: String! @constraint(minLength: 3)): String!
} 

I get the custom scalar in my schema:

type Query {
  hello(name: name_String_NotNull_minLength_3!): String!
} 

This causes the generator fail for my FE query

query Hello($name: String!) {
  hello(name: $name)
} 

due to the mismatch of scalar:

Error 0: GraphQLDocumentError: Variable "$name" of type "String!" used in position expecting type "nameOrIco_String_NotNull_minLength_3!". 

So my current solution is to define the scalar explicitly in the config to map it to string.

overwrite: true
schema: ${API_URL}/graphql
documents: 'src/graphql/**/*.graphql'
generates:
  src/generated/graphqlClient.ts:
    noPluck: true
    config:
      strictScalars: true
      scalars:
        Date: number
        nameOrIco_String_NotNull_minLength_3: string // HERE
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo' 

I should not need to do such manual step...

Commented On 09 Aug 2022 at 02:22:33

MiroslavPetrik

Missing types for `gapi.client.directory`

Hi

The Admin SDK contains multiple apis one of which is the Directory API.

There is gapi.client.admin which does not contain the Directory API calls. Note that it also includes reports_v1 in the title.

There is no gapi.client.directory and there should be one.

I've checked the list of all service discovery docs and the reports_v1 is marked as preferred. Also I've checked that the list contains the directory API service. image

The preferred flag is used in practice https://github.com/Maxim-Mazurok/google-api-typings-generator/blob/master/src/app.ts#L1152

So I think that not all the services are published on NPM and I would expect them to be there.

Edit: I'm able to generate the Directory API types with command

npm start -- --url https://admin.googleapis.com/\\\$discovery/rest?version=directory_v1 

The resulting folder is named types/gapi.client.admin which is in collision with the above mentioned npm package which has the reports_v1 "version".

So I think the generator should be adjusted to generate APIs by id instead of name (see the screenshot above for difference between id and name).

Edit2 ((just to confirm)

In the generated readme it says:

## Installing

Install typings for Admin SDK API:

`npm install @types/gapi.client.admin@directory_v1 --save-dev` 

But really it does not exist :

$ yarn add -D  @types/gapi.client.admin@directory_v1
➤ YN0000: ┌ Resolution step
➤ YN0016: │ @types/gapi.client.admin@npm:directory_v1: Registry failed to return tag "directory_v1"
➤ YN0000: └ Completed in 0s 974ms
➤ YN0000: Failed with errors in 0s 976ms 

Forked On 08 Aug 2022 at 07:38:41

MiroslavPetrik

Hey @Maxim-Mazurok I've generated the types from the PR and it now has the directory version: image

Also I've used the types in my project and it still builds successfully :)

Huge thank you for fixing this!

Commented On 08 Aug 2022 at 07:38:41

MiroslavPetrik

started

Started On 04 Aug 2022 at 07:03:42

MiroslavPetrik

started

Started On 29 Jul 2022 at 04:02:20

MiroslavPetrik

⚡️ Simple, Modular & Accessible UI Components for your React Applications

Forked On 26 Jul 2022 at 12:26:45

MiroslavPetrik

started

Started On 22 Jul 2022 at 01:32:24

MiroslavPetrik

started

Started On 21 Jul 2022 at 03:35:31

MiroslavPetrik

started

Started On 18 Jul 2022 at 04:55:32

MiroslavPetrik

started

Started On 18 Jul 2022 at 12:33:50

MiroslavPetrik

[feature request] encourage the usage of named import

As the doc says https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports

named import is preferred over the default import

Good:

import { useState } from 'react';

// useState(...) 

Bad:

import React from 'react';

// React.useState(...) 

There should be a rule to enforce that?

Forked On 15 Jul 2022 at 11:14:08

MiroslavPetrik

The default export is half the story, still you can do wildcard import import * as React from 'react' so the rule to not have global React is still needed.

The workaround does not cover this case.

Commented On 15 Jul 2022 at 11:14:08

MiroslavPetrik

started

Started On 05 Jul 2022 at 06:58:59