Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(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
+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
-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
-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
-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
+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
-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 />