ananth
Fri Jan 20 2023
MermaidJS can be used in Gitlab description and comments to display workflows and flowcharts
https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts
https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts
syedsibtain
Mon Jan 16 2023
Aliases in Graphql.
Let’s say we have a query that return us the cars Data. If we add both the queries, we will get an error.
UseCase Example:
👇This will throw error
👇This will work
It works because we are using
Extra Resources: https://blog.logrocket.com/using-aliases-graphql/#:~:text=What%20are%20GraphQL%20aliases%3F,it%20according%20to%20your%20specifications.
Let’s say we have a query that return us the cars Data. If we add both the queries, we will get an error.
Fields "cars" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.UseCase Example:
👇This will throw error
{
cars(filter: "name = Cars") {
edges {
node {
name
speed
}
}
}
cars {
edges{
node{
name
}
}
}
}👇This will work
{
slowCars: cars(filter: "Cars") {
edges {
node {
name
}
}
}
fastCars: cars {
edges{
node{
name
}
}
}
}It works because we are using
aliases here. Aliases let us change the names of the data that is displayed in a query’s results. It is incredibly helpful when we need to fetch the same data using different filters.Extra Resources: https://blog.logrocket.com/using-aliases-graphql/#:~:text=What%20are%20GraphQL%20aliases%3F,it%20according%20to%20your%20specifications.
syedsibtain
Mon Jan 16 2023
Aliases in Graphql.
Let’s say we have a query that return us the cars Data. If we add both the queries, we will get an error.
UseCase Example:
👇This will throw error
Let’s say we have a query that return us the cars Data. If we add both the queries, we will get an error.
Fields "cars" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional.UseCase Example:
👇This will throw error
{
cars(filter: "name = Cars") {
edges {
node {
name
speed
}
}
}
cars {
edges{
node{
name
}
}
}
}
mainak
Sat Jan 14 2023
test revalidate NEXT
syedsibtain
Fri Jan 13 2023
We have 7 different TypeScript utility types, like
React's utility type
It is used in the definition of the component to identify the types of properties it can receive, including the children prop, which contains any elements contained within the component's JSX. In addition to children, it allows for the use of various props.
UseCase Example
Additional Resources: https://www.chakshunyu.com/blog/7-typescript-utility-types-for-react-developers/
Pick Omit Partial NonNullable React.ComponentProps React.MouseEventHandler and special one React.PropsWithChildrenReact's utility type
PropsWithChildren enables components to take both props and child elements as input.It is used in the definition of the component to identify the types of properties it can receive, including the children prop, which contains any elements contained within the component's JSX. In addition to children, it allows for the use of various props.
UseCase Example
const Track = ({ children }:PropsWithChildren) => {
return (
{children}
);
};Additional Resources: https://www.chakshunyu.com/blog/7-typescript-utility-types-for-react-developers/
syedsibtain
Wed Jan 11 2023
When using dynamic
Example:
If the expression
So class
classnames, further conditions can be added depending on whether the initial condition is true or false.Example:
{icons &&
icons.map((icon: any, index: number) => {
return (
{icon.icon}
{icon.name}
);
})}If the expression
index % 2 (modulus) evaluates to true, the class name col-span-4 will be added. The second className which is col-span-3 and it is added if the expression !(index % 2) evaluates to true. However the ! mark changes the Boolean to falseSo class
col-span-4 is added when the index is even, whereas the class col-span-3 is added when the index is odd.
vinaysripath
Wed Jan 11 2023
Using Material UI to create an interface, use the icons, buttons, layouts, navigation and other MUI components. Using the
install MUI:
import the suitable components:
simply use them like normal tags and add inline styles using the
sx prop to add css to individual components without using styled or tailwind classes.install MUI:
npm install @mui/material @emotion/react @emotion/styled import the suitable components:
import { Box, IconButton, Paper, Typography } from "@mui/material";simply use them like normal tags and add inline styles using the
sx prop. The sx prop allows us to use a superset of css classes making it very intuitive to use.
ayushsrivastava
Wed Jan 11 2023
React.ChildrenWe can use the
React.Children APIs to modify elements created by React before they’re rendered. It provides utilities for dealing with the this.props.children opaque data structure.For example :-
React.Children.count(children)Returns the total number of components in
children, equal to the number of times that a callback passed to map or forEach would be invokedvinaysripath
Wed Jan 11 2023
Using Material UI to create an interface, use the icons, buttons, layouts, navigation and other MUI components and adding styles using the sx prop.
syedsibtain
Tue Jan 10 2023
I discovered that manipulating the elements is possible with
The function mentioned above makes a clone of the first parameter which is
React.cloneElement() function. This can be used when a parent component wants to add or change the props of its children.React.cloneElement(element, [props], [...children])The function mentioned above makes a clone of the first parameter which is
element and returns an element with the desired changes. We can further pass props to it as well.Showing 39 to 41 of 73 results