graphql-request
chakra-ui
Our great sponsors
graphql-request | chakra-ui | |
---|---|---|
30 | 343 | |
5,622 | 36,354 | |
0.7% | 1.3% | |
9.1 | 9.0 | |
7 days ago | about 22 hours ago | |
TypeScript | MDX | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
graphql-request
-
A Simple Way to Sign AWS Requests with Signature V4
The aws-sigv4-fetch package can be integrated into GraphQL libraries like graphql-request. For example, you can pass the signedFetch function as the custom fetch option:
-
Integrating GraphQL Codegen with Storyblok: Step-by-Step Guide
For Next.js projects, one of the options can be the typescript-graphql-request plugin. Under the hood this plugin works with the graphql-request library β a minimal, flexible, and easy-to-use GraphQL client. With typescript-graphql-request, we generate an SDK that is fully typed and allowing us to make strongly-typed GraphQL requests. This nicely integrates with data fetching in Next.js Server Components, enabling us to pre-render pages with data from Storyblok.
- Is graphql-request a good tool for only client side api? Share your feedbacks. Thanks π
-
How to build a Snowflake API?
An example of a Snowflake API request using JavaScript. This example uses the graphql-request library to issue the actual GraphQL request. Install the dependency:
- 2022 Best GraphQL Client? Currently using GraphQL-CodeGen + Apollo Client
-
Four ways to fetch data from the GitHub GraphQL API in Next.js
I mentioned already we can use just about any client want when fetching GraphQL data. Prisma's graphql-request is a simple and lightweight option, and that is what Iβve used here.
-
Managing a Remix Site's Content With Sanity.io
To do this, you will make use of a tool called GraphQL Codegen to generate TypeScript types based on the GraphQL schema Sanity provides. You will then use graphql-request to actually fetch the data.
-
SvelteQuery vs KitQL vs others
What about https://github.com/prisma-labs/graphql-request that has 4.8k starts / 254 forks?
-
Build a GraphQL app in Node.js with TypeScript and graphql-request
In this article, you will build a full-stack app using GraphQL and Node.js in the backend. Meanwhile, our frontend will use the graphql-request library to perform network operations on our backend. We will cover the following steps:
-
How not to learn GraphQL
Finally, when it comes to building simple applications that might not need caching or optimistic UIs capabilities, the famous graphql-request library is a perfect companion!
chakra-ui
-
React Component Libraries
Official Website: https://chakra-ui.com/
-
Material UI vs. Chakra UI: Which One to Choose?
Discover Chakra UI: Chakra UI Documentation
- Tailwind Color Palette Generator
-
Minified React error #426
This error related to the ReactMarkdown component and the useDisclosure hook in the @chakra-ui/react.
-
Shoelace: A forward-thinking library of web components
We settled on Chakra (https://chakra-ui.com/). Although we also abandoned our ambitions of a Next.js migration, so... I guess it didn't really end up mattering all that much anyway.
-
33 React Libraries Every React Developer Should Have In Their Arsenal
4.chakra-ui
-
β‘Top GitHub Repositories for UI Components
π Site β GitHub
-
Beyond the Basics: Exploring TailwindCSS and Linaria in Next.js - From Installation to Performance Optimization
Examples: radix-ui, chakra-ui, shadcn/ui, tailwind-ui.
-
Ask HN: Examples of best practice modern website design?
(I'm a frontend dev, but I came into the design side only later in my career, after having started as a full-stack programmer.)
I think this book is probably the single best resource I've seen on the topic: https://www.refactoringui.com/
It's a really easy-to-use format (one quick tip on each page, with clear examples).
It's from the people who made Tailwind, a CSS framework that's basically a reimagining of Bootcamp for the Javascript/component era.
Check out some of their templates: https://tailwindui.com/templates
These are lookalike "modern" designs that you can pay to use, or just draw inspiration from. Imitation == flattery and all that.
Along similar lines, check out the free Next.js templates: https://vercel.com/templates/next.js
If you want to build up from components instead, Tailwind offers a component library too: https://tailwindui.com/components
For React, I prefer the astoundingly good MUI framework (amazing components with lots of customizability, a good enough default look, and great documentation): https://mui.com/ If you end up going this route, using their Figma kit (https://mui.com/store/items/figma-react/) plus the Refactoring UI book from above should allow you to whip up a pretty standard-looking, "pretty enough" design in very little time. And then implementing it using the actual MUI lib would just take a few days.
There's also Ant Design: https://ant.design/
And Chakra UI: https://chakra-ui.com/
-----------
For more theoretical stuff (i.e., less visual but still very valuable), the UX research group Nielsen Norman still has a treasure trove of valuable advice: https://www.nngroup.com/articles/top-ten-guidelines-for-home...
You should know the basics of accessibility (beyond general usability, this alos means alt text, header levels, contrast ratios, readability, screen readers, keyboard navigation, special considerations for the hard of sight and hearing, etc.): https://www.w3.org/WAI/standards-guidelines/wcag/ or at least use an easy checklist tool like Microsoft's WCAG analyzer: https://accessibilityinsights.io/
- Ask HN: What's your favorite UI library?
What are some alternatives?
mantine - A fully featured React components library
antd - An enterprise-class UI design language and React UI library
styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress π
Tailwind CSS - A utility-first CSS framework for rapid UI development.
react-star-rating-input - React.js components for entering 0βN stars (N is 5 by default), or displaying 0βN stars
Material UI - Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
rebass - :atom_symbol: React primitive UI components built with styled-system.
grommet - a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
primereact - The Most Complete React UI Component Library
base web - A React Component library implementing the Base design language
shadcn/ui - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
react-draft-wysiwyg - A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg