I'm trying to build this project and I'm getting error that property doesn't exist.
What's the issue?
https://www.prisma.io/blog/fullstack-nextjs-graphql-prisma-2-fwpc6ds155
./graphql/types/Link.ts:20:7
Type error: Property 'connectionField' does not exist on type 'ObjectDefinitionBlock<"Query">'.
18 | type: 'Query',
19 | definition(t) {
20 | t.connectionField('links', {
| ^
21 | type: Link,
22 | resolve: async (_, { after, first }, ctx) => {
23 | const offset = after ? cursorToOffset(after) + 1 : 0;
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
hanymorcos#Hanys-MBP awesome-links %
Related
I am getting this error in my styled component:
Type 'string | undefined' is not assignable to type 'WordBreak | undefined'.
It is happening here:
type PropsType = {
breakEverywhere?: boolean
breakWord?: boolean
}
const Text = styled.p<PropsType>(props => ({
wordBreak: getWordBreak(props),
}))
function getWordBreak(props: PropsType): string | undefined {
if (props.breakWord) {
return 'break-word'
}
if (props.breakEverywhere) {
return 'break-all'
}
}
It can be easily fixed by leaving off the type annotation string | undefined on the getWordBreak function. But how can I add a type annotation? It says WordBreak, but google searching for WordBreak type definitions doesn't yield any results, and no VSCode help. Any ideas?
The same sort of problem happens if I abstract away textAlign to in a similar way, it talks about TextAlign type. Looks like the csstype won't help either.
If I use this in the styled component:
textAlign: props.align ? TEXT_ALIGN[props.align] : undefined,
And I have this:
type AlignType = 'center' | 'end' | 'start'
const TEXT_ALIGN: Record<AlignType, string> = {
center: 'center',
end: 'right',
start: 'left',
}
Then i get this:
Types of property 'textAlign' are incompatible.
Type 'string | undefined' is not assignable to type 'TextAlign | undefined'.
Type 'string' is not assignable to type 'TextAlign | undefined'.ts(2345)
I can fix it with an untyped function instead:
function getTextAlign(align: AlignType) {
switch (align) {
case 'center':
return 'center'
case 'end':
return 'right'
default:
return 'left'
}
}
But that is ugly, how can I do it the Record way or a cleaner way? How can I get access to these types?
Looks like the csstype won't help either.
Styled-components types are based on csstype, so you should be able to get what you need from there.
Type WordBreak is in namespace Property of csstype:
export namespace Property {
// ...
export type WordBreak = Globals | "break-all" | "break-word" | "keep-all" | "normal";
// ...
}
Using it with your code sample:
import styled from "styled-components"
import { Property } from "csstype"
const Text2 = styled.p<PropsType>(props => ({
wordBreak: getWordBreak2(props), // Okay
}))
function getWordBreak2(props: PropsType): Property.WordBreak | undefined { // Okay
if (props.breakWord) {
return 'break-word'
}
if (props.breakEverywhere) {
return 'break-all'
}
return
}
Playground Link
This question already has answers here:
"Type 'string | string[]' is not assignable to type 'string'
(3 answers)
Closed 8 months ago.
When I build the project, my project won't let me pass:
Type error: Type 'string | string[]' is not assignable to type 'string[]'.
Type 'string' is not assignable to type 'string[]'.
12 | const items = products({
13 | where: {
> 14 | slugIn: productSlug,
| ^
15 | },
16 | }).nodes
I know is a ESLint on GraphQL, how do I setup my ESLint to let it pass this part?
My .eslintrc:
{
"extends": ["plugin:storybook/recommended", "next", "next/core-web-vitals", "eslint:recommended"],
"globals": {
"React": "readonly",
"JSX": "readonly"
},
"rules": {
"no-unused-vars": [
1,
{
"args": "after-used",
"argsIgnorePattern": "^_",
"react/react-in-jsx-scope": "off"
}
]
},
"overrides": [{
"files": ["*.stories.#(ts|tsx|js|jsx|mjs|cjs)"],
"rules": {
"storybook/hierarchy-separator": "error"
}
}]
}
sorry not a eslint problem, is code error.
looks like productSlug is a union type between string | string[] , slugIn takes an array of strings i.e string[]. To get passed the typing error, you could replace line 14 with something like this slugIn: Array.isArray(productSlug) ? productSlug : [productSlug]
change
const items = products({
where: {
slugIn: productSlug,
},
}).nodes
to
const items = products({
where: {
slugIn: Array.isArray(productSlug) ? productSlug : [productSlug],
},
}).nodes
I am trying to pattern match on an enum when getting an item from my dashmap::DashMap. However, it looks like they have a wrapper type over the Entity when they return the data. How can I pattern match over the items then?
use once_cell::sync::Lazy;
use dashmap::DashMap;
enum Entity {
Person { name: String },
Animal { name: String },
}
static ENTITIES: Lazy<DashMap<usize, Entity>> = Lazy::new(|| DashMap::new());
fn main() {
ENTITIES.insert(
0,
Entity::Animal {
name: "pikachu".into(),
},
);
ENTITIES.insert(
1,
Entity::Person {
name: "trainer mike".into(),
},
);
match ENTITIES.get(&0) {
Some(Entity::Animal { name }) => { // compile error here
println!("found animal: {}", name);
}
_ => panic!("did not find person"),
}
}
And the error:
error[E0308]: mismatched types
--> src\lib.rs:__:__
|
| match ENTITIES.get(&0) {
| -------------- this expression has type `Option<dashmap::mapref::one::Ref<'_, usize, Entity>>`
| Some(Entity::Animal { name }) => {
| ^^^^^^^^^^^^^^^^^^^^^^^ expected struct `dashmap::mapref::one::Ref`, found enum `Entity`
|
= note: expected struct `dashmap::mapref::one::Ref<'_, usize, Entity, >`
found enum `Entity`
I have opened up the project that I have not touched since yesterday.
Now, I am getting a typescript error for an object in a tsx component.
<Shadowed {...getRootProps()} {...props} dropped={dropped} left={left} isDragActive={isDragActive} id='Drop zone'>
<input {...getInputProps()} />
{
isDragActive ?
<p>Drop the files here ...</p>
:
!userHasntDropped ?
<DropHere />
:
<FileCard file={dropped} isDragActive={isDragActive} selected={selected} />
}
</Shadowed>
Dropped is a file I'm getting from the redux state:
const dropped: any = useSelector(state => left ? state.files.fileLeft : state.files.fileRight);
Shadowed is a styled-component:
const Shadowed = styled.div`
height:${props => props.dropped && props.dropped.length > 0 ? '100px' : 'calc(50% - 50px)'};
width:${props => props.dropped && props.dropped.length > 0 ? '240px' : '25%'};
align-items:center;
display:flex;
justify-content:center;
pointer-events: auto;
align-self:${props => props.dropped && props.dropped.length > 0 ? 'flex-end' : 'center'};
margin-bottom:25px;
margin-top:25px;
border:${props => props.dropped && props.dropped.length > 0 ? '1px solid rgba(0,0,0,0.20)' : 'null'};
cursor:pointer;
border-radius:8px;
box-shadow:${props => props.dropped && props.dropped.length > 0 ? null : props.isDragActive ? '0px 0px 25px 5px rgba(0,0,0,0.15)' : '4px 4px 8px 0px rgba(0,0,0,0.06), -4px -4px 16px 10px #fff'};
background:${props => props.isDragActive ? 'white' : 'rgb(252, 253, 254)'};
&:hover{
box-shadow:0px 0px 25px 5px rgba(0,0,0,0.15);
background:white;
}
`
Error I am getting:
C:/Users/danie/Code/compare/src/compareapp/ui/DropIt.tsx
TypeScript error in C:/Users/danie/Code/compare/src/compareapp/ui/DropIt.tsx(62,46):
No overload matches this call.
Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 255 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 255 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ children: Element[]; dropped: any; left: Boolean; isDragActive: boolean; refKey?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; ... 249 more ...; onTransitionEndCapture?: (event: TransitionEvent<...>) => void; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 255 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 255 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
Property 'dropped' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 255 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 255 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"div", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
Type '{ children: Element[]; dropped: any; left: Boolean; isDragActive: boolean; refKey?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; ... 249 more ...; onTransitionEndCapture?: (event: TransitionEvent<...>) => void; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 255 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 255 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
Property 'dropped' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 255 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 255 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'. TS2769
60 |
61 | return (
> 62 | <Shadowed {...getRootProps()} {...props} dropped={dropped} left={left} isDragActive={isDragActive}>
| ^
63 | <input {...getInputProps()} />
64 | {
65 | isDragActive ?
I've tried switching back to a previous typescript version but got the same error.
I've tried adding types to the initialstate of redux
I've tried if it is a styled-components error through this solution: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-446011384
What could be going on here?
Thank you in advance
I have added interface definitions to the styled components like this:
interface ShadowedProps {
readonly isDragActive: boolean;
readonly dropped: any;
};
const Shadowed = styled.div<ShadowedProps>`
{*** CSS here ***}
`
Now it works. This is clearly documented on styled-components, here: https://styled-components.com/docs/api#typescript
I was unaware that we have to do this explicitly. It is really odd that it worked so far, I have no idea what made it realise I am using it badly.
I am new to firebase rules, my firebase db is like below
db
school1
|
|___classA
| |_classData
|
|
|___students
|__studentA
| |
| |__name
| |__roles
| |
| |_admin
| | |__exists : true
| |_student
| |___exists : true
|
|___studentB
|_name
|_roles
|_admin
| |__exists : false
|_student
|_exists : true
Now, I want a rule that if the studentA is an admin of classA then he was allowed to get the data of classA otherwise the student is denined to get the data of classA, I tried something like below but failed
{
rules:{
school1 :{
classA : {
".read":"root.child('school1/students').child('roles/admin').child('exists').val()==true"
}
}
}
}
Thanks in advance
You need something like that :
{
"rules": {
"school1": {
"classA": {
".read":"auth != null && root.child('school1').child('students').child(auth.uid).child('roles').child('admin').child('exists').val() === true"
}
}
}
}
But studentA need to be equal to the user id present in the auth token.