Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

(docs) - Update all slogan texts across several documents (#1177)

* Update website hero text

* Replace "Quick Start" with "Overview" as it's React-specific

This isn't quite equitable for non-React users and I have high trust
in the quality of our "Basics" pages. Hence "Overview" may only need
a few more pointers.

* Update first tagline in "Overview"

* Remove React-specific components section from urql page

authored by

Phil Pluckthun and committed by
GitHub
446e01d8 ae254626

+62 -159
+59 -42
docs/README.md
··· 1 1 --- 2 - title: Quick start 3 - order: 0 2 + title: Overview 3 + order: 1 4 4 --- 5 5 6 - # Quick start 6 + # Overview 7 + 8 + `urql` is a highly customizable and versatile GraphQL client with which you add on features like 9 + normalized caching as you grow. It's built to be both easy to use for newcomers to 10 + GraphQL, as well as extensible, to grow to support dynamic single-app applications and highly 11 + customized GraphQL infrastructure. In short, `urql` prioritizes usability and adaptability. 12 + 13 + As you're adopting GraphQL, `urql` becomes your primary data layer and can handle content-heavy 14 + pages through ["Document Caching"](./basics/document-caching.md) as well as dynamic and data-heavy 15 + apps through ["Normalized Caching"](./graphcache/normalized-caching.md). 16 + 17 + ## Constituent Parts 18 + 19 + `urql` can be understood as a collection of connected parts and packages. When [getting started](./basics/getting-started.md) we only need to install a single package for our 20 + framework of choice. We're then able to declaratively send GraphQL requests to our API. 21 + 22 + All framework packages — like `urql` (for React), `@urql/preact`, `@urql/svelte`, and `@urql/vue` — 23 + wrap the [core package, `@urql/core`](./concepts/core-package.md), which we can imagine as the brain 24 + of `urql` with most of its logic. 25 + 26 + As we progress with implementing `urql` into our application, we're later able to extend it by 27 + adding ["addon packages", which we call _Exchanges_](./concepts/exchanges.md) 7 28 8 - `urql` is a blazingly fast, lightweight, and customisable GraphQL client. We believe in usability and adaptability, `urql` is built with extensibility at its 9 - core, allowing you to include just the key logic for a basic app, in addition to being able to grow to support dynamic single-app applications and highly 10 - customised infrastructure. 29 + ## Quick Start 11 30 12 - In this page we'll take a look at the quickest route to get up and running with `urql`. 31 + We have **Getting Started** guides for 32 + [React & 33 + Preact](https://formidable.com/open-source/urql/docs/basics/getting-started/#react--preact), 34 + [Svelte](https://formidable.com/open-source/urql/docs/basics/getting-started/#svelte), and 35 + [Vue](https://formidable.com/open-source/urql/docs/basics/getting-started/#vue) which walk through 36 + how to install the bindings for your framework of choice and set up the 37 + [`Client`](./api/core.md#client). 13 38 14 - ## Installation 39 + Generally for React this would look like this, where the `urql` package may be replaced with your 40 + framework's bindings: 15 41 16 42 ```sh 17 - # npm 18 43 npm i --save urql graphql 19 - # or yarn 44 + # or 20 45 yarn add urql graphql 21 46 ``` 22 47 23 - ## Making the client 48 + The **Basics** section also features pages to [write 49 + Queries](https://formidable.com/open-source/urql/docs/basics/queries/), 50 + [Mutations](https://formidable.com/open-source/urql/docs/basics/mutations/), after which we could 51 + continue learning about 52 + [Subscriptions](https://formidable.com/open-source/urql/docs/advanced/subscriptions/). These are 53 + among the only pages that are framework-specific. 24 54 25 - ```jsx 26 - import { createClient, Provider } from 'urql'; 55 + ## The Documentation 27 56 28 - const client = createClient({ url: 'https://0ufyz.sse.codesandbox.io' }); 57 + This documentation is split into groups or sections that cover different levels of usage or areas of 58 + interest. 29 59 30 - const App = () => ( 31 - <Provider value={client}> 32 - <Todos /> 33 - </Provider> 34 - ); 35 - ``` 36 - 37 - ## Querying data 38 - 39 - ```jsx 40 - const Todos = () => { 41 - const [res, executeQuery] = useQuery({ 42 - query: ` 43 - query { todos { id text } } 44 - `, 45 - }); 46 - 47 - if (res.fetching) return <p>Loading...</p>; 48 - if (res.error) return <p>Errored!</p>; 60 + - **Basics** is the section where we find the ["Getting Started" 61 + guide](./basics/getting-started.md) and usage patterns for our framework of choice. 62 + - **Main Concepts** then explains more about how `urql` functions, what it's made up of, and covers 63 + the main aspects of the `Client` and GraphQL clients in general, on the ["Philosophy" 64 + page](./concepts/philosophy.md). 65 + - **Advanced** covers all more uncommon use-cases and contains guides that we won't need immediately 66 + when we get started with `urql`. 67 + - **Graphcache** documents one of the most important addons to `urql`, which adds ["Normalized 68 + Caching" support](./graphcache/normalized-caching.md) to the `Client` and enables more complex 69 + use-cases, smarter caching, and more dynamic apps to function. 70 + - **Showcase** aims to list users of `urql`, third-party packages, and other helpful resources, 71 + like tutorials and guides. 72 + - **API** contains a detailed list of all helpers, utilities, components, and other parts of each of 73 + `urql`'s packages, which may contain all details of each part and package. 49 74 50 - return ( 51 - <ul> 52 - {res.data.todos.map(todo => ( 53 - <li key={todo.id}>{todo.text}</li> 54 - ))} 55 - </ul> 56 - ); 57 - }; 58 - ``` 75 + We hope you grow to love `urql`!
-48
docs/overview.md
··· 1 - --- 2 - title: Overview 3 - order: 1 4 - --- 5 - 6 - # Overview 7 - 8 - `urql` is an implementation of a GraphQL client, built to be both easy to use for newcomers to 9 - GraphQL, as well as extensible, to grow to support dynamic single-app applications and highly 10 - customized GraphQL infrastructure. In short, `urql` prioritizes usability and adaptability. 11 - 12 - As you're adopting GraphQL, `urql` becomes your primary data layer and can handle content-heavy 13 - pages through ["Document Caching"](./basics/document-caching.md) as well as dynamic and data-heavy 14 - apps through ["Normalized Caching"](./graphcache/normalized-caching.md). 15 - 16 - ## Constituent Parts 17 - 18 - `urql` can be understood as a collection of connected parts and packages. When [getting started](./basics/getting-started.md) we only need to install a single package for our 19 - framework of choice. We're then able to declaratively send GraphQL requests to our API. 20 - 21 - All framework packages — like `urql`, `@urql/preact`, and `@urql/svelte` — wrap the [core 22 - package](./concepts/core-package.md), which we can imagine as the brain of `urql` with most of its 23 - logic. 24 - 25 - As we progress with implementing `urql` into our application, we're later able to extend it by 26 - adding ["addon packages", which we call _Exchanges_](./concepts/exchanges.md) 27 - 28 - ## The Documentation 29 - 30 - This documentation is split into groups or sections that cover different levels of usage or areas of 31 - interest. 32 - 33 - - **Basics** is the section where we find the ["Getting Started" 34 - guide](./basics/getting-started.md) and usage patterns for our framework of choice. 35 - - **Main Concepts** then explains more about how `urql` functions, what it's made up of, and covers 36 - the main aspects of the `Client` and GraphQL clients in general, on the ["Philosophy" 37 - page](./concepts/philosophy.md). 38 - - **Advanced** covers all more uncommon use-cases and contains guides that we won't need immediately 39 - when we get started with `urql`. 40 - - **Graphcache** documents one of the most important addons to `urql`, which adds ["Normalized 41 - Caching" support](./graphcache/normalized-caching.md) to the `Client` and enables more complex 42 - use-cases, smarter caching, and more dynamic apps to function. 43 - - **Showcase** aims to list users of `urql`, third-party packages, and other helpful resources, 44 - like tutorials and guides. 45 - - **API** contains a detailed list of all helpers, utilities, components, and other parts of each of 46 - `urql`'s packages, which may contain all details of each part and package. 47 - 48 - We hope you grow to love `urql`!
-6
packages/site/src/screens/home/_content.js
··· 24 24 icon: require('../../assets/clock-tile.svg'), 25 25 }, 26 26 ], 27 - components: { 28 - title: 'Minimal React Components and Hooks', 29 - description: 30 - "Whether you prefer a <Query> component or useQuery Hook, urql's API is intuitive to use, with full support for GraphQL Queries, Mutations and Subscriptions in both styles!", 31 - icon: require('../../assets/react-tile.svg'), 32 - }, 33 27 preview: { 34 28 description: '', 35 29 media: '',
-59
packages/site/src/screens/home/components.js
··· 1 - import React from 'react'; 2 - import PropTypes from 'prop-types'; 3 - import styled from 'styled-components'; 4 - 5 - import { SecondaryTitle } from '../../components/secondary-title'; 6 - import { BodyCopy } from '../../components/body-copy'; 7 - import { PanelSectionWrapper } from '../../components/panel'; 8 - 9 - const ComponentWrapper = styled.div` 10 - margin: 0 0 0; 11 - display: flex; 12 - flex-direction: column; 13 - align-items: center; 14 - text-align: center; 15 - > img { 16 - width: 100%; 17 - max-width: 10rem; 18 - margin-bottom: 20px; 19 - } 20 - `; 21 - 22 - const SecondaryTitleCentred = styled(SecondaryTitle)` 23 - @media (min-width: 768px) { 24 - text-align: center; 25 - } 26 - `; 27 - 28 - const BodyCopyCentred = styled(BodyCopy)` 29 - margin-top: 2rem; 30 - max-width: 28rem; 31 - 32 - @media (min-width: 768px) { 33 - text-align: center; 34 - } 35 - 36 - @media (min-width: 1024px) { 37 - max-width: 20vw; 38 - } 39 - `; 40 - 41 - const Components = props => { 42 - return ( 43 - <PanelSectionWrapper isLight> 44 - <ComponentWrapper> 45 - <img src={props.components.icon} /> 46 - <SecondaryTitleCentred>{props.components.title}</SecondaryTitleCentred> 47 - <BodyCopyCentred>{props.components.description}</BodyCopyCentred> 48 - </ComponentWrapper> 49 - </PanelSectionWrapper> 50 - ); 51 - }; 52 - 53 - Components.displayName = 'Components'; 54 - 55 - Components.propTypes = { 56 - components: PropTypes.object, 57 - }; 58 - 59 - export default Components;
+3 -2
packages/site/src/screens/home/hero.js
··· 219 219 </HeroLogoContainer> 220 220 <HeroTitle>urql</HeroTitle> 221 221 <HeroBody> 222 - urql is a blazing-fast GraphQL client that supports React, Preact, and 223 - Svelte (alpha). 222 + The highly customizable and versatile GraphQL client for React, 223 + Svelte, Vue, or plain JavaScript, with which you add on features like 224 + normalized caching as you grow. 224 225 </HeroBody> 225 226 <HeroButtonsWrapper> 226 227 <HeroNPMWrapper>
-2
packages/site/src/screens/home/index.js
··· 4 4 import { useMarkdownTree } from 'react-static-plugin-md-pages'; 5 5 6 6 import Features from './features'; 7 - import Components from './components'; 8 7 import GetStarted from './get-started'; 9 8 import MoreOSS from './more-oss'; 10 9 import content from './_content'; ··· 23 22 <Container ref={ref}> 24 23 <Header content={content.header} /> 25 24 <Features featureArray={content.features} /> 26 - <Components components={content.components} /> 27 25 <GetStarted content={content.getStarted} /> 28 26 <MoreOSS oss={content.oss} /> 29 27 <Footer />