Skip to content

Commit 3941210

Browse files
committed
fix some readme typos
1 parent 64a03a7 commit 3941210

1 file changed

Lines changed: 19 additions & 19 deletions

File tree

README.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ This library is being built and maintained by me, @tannerlinsley and I am always
255255
- [SSR & Initial Data](#ssr--initial-data)
256256
- [Suspense Mode](#suspense-mode)
257257
- [Fetch-on-render vs Fetch-as-you-render](#fetch-on-render-vs-fetch-as-you-render)
258-
- [Cancelling Query Requests](#cancelling-query-requests)
258+
- [Canceling Query Requests](#canceling-query-requests)
259259
- [Mutations](#mutations)
260260
- [Basic Mutations](#basic-mutations)
261261
- [Mutation Variables](#mutation-variables)
@@ -347,7 +347,7 @@ At its core, React Query manages query caching for you and uses a serializable a
347347

348348
### String-Only Query Keys
349349

350-
The simplest form of a key is actuall not an arry, but just an individual string. When a string query key is passed, it is converted to an array internally with the string as the only item in the query key. This format is useful for:
350+
The simplest form of a key is actually not an array, but an individual string. When a string query key is passed, it is converted to an array internally with the string as the only item in the query key. This format is useful for:
351351

352352
- Generic List/Index resources
353353
- Non-hierarchical resources
@@ -576,8 +576,8 @@ Rendering paginated data is a very common UI pattern to avoid overloading bandwi
576576
577577
Consider the following example where we would ideally want to increment a pageIndex (or cursor) for a query. If we were to use `useQuery`, it would technically work fine, but the UI would jump in and out of the `success` and `loading` states as different queries are created and destroyed for each page or cursor. By using `usePaginatedQuery` we get a few new things:
578578
579-
- Instead of `data`, you should use `resolvedData` instead. This is the data from last known successful query result. As new page queries resolve, `resolvedData` remains available to show the last page's data while a new page is requested. When the new page data is received, `resolvedData` get's updated to the new page's data.
580-
- If you specifically need the data for exact page being requested, `latestData` is available. When the desired page is being requested, `latestData` will be `undefined` until the query resolves, then it will get updated with the latest pages data result.
579+
- Instead of `data`, you should use `resolvedData` instead. This is the data from the last known successful query result. As new page queries resolve, `resolvedData` remains available to show the last page's data while a new page is requested. When the new page data is received, `resolvedData` get's updated to the new page's data.
580+
- If you specifically need the data for the exact page being requested, `latestData` is available. When the desired page is being requested, `latestData` will be `undefined` until the query resolves, then it will get updated with the latest pages data result.
581581
582582
```js
583583
function Todos() {
@@ -661,7 +661,7 @@ fetch('/api/projects?cursor=9')
661661
// { data: [...] }
662662
```
663663
664-
With this information we can create a "Load More" UI by:
664+
With this information, we can create a "Load More" UI by:
665665
666666
- Waiting for `useInfiniteQuery` to request the first group of data by default
667667
- Returning the information for the next query in `getFetchMore`
@@ -724,7 +724,7 @@ When an infinite query becomes `stale` and needs to be refetched, each group is
724724
725725
### What if I need to pass custom information to my query function?
726726
727-
By default the info returned from `getFetchMore` will be supplied to the query function, but in some cases, you may want to override this. You can pass custom variables to the `fetchMore` function which will override the default info like so:
727+
By default, the info returned from `getFetchMore` will be supplied to the query function, but in some cases, you may want to override this. You can pass custom variables to the `fetchMore` function which will override the default info like so:
728728
729729
```js
730730
function Projects() {
@@ -889,7 +889,7 @@ function Todos() {
889889
890890
## Initial Data Function
891891
892-
If the process for accessing a query's initial data is intensive or just not something you want to perform on every render, you can pass a function as the `initialData` value. This function will be executed only once when the query is initialized, saving you precious memory and cpu:
892+
If the process for accessing a query's initial data is intensive or just not something you want to perform on every render, you can pass a function as the `initialData` value. This function will be executed only once when the query is initialized, saving you precious memory and CPU:
893893
894894
```js
895895
function Todos() {
@@ -903,7 +903,7 @@ function Todos() {
903903
904904
## Initial Data from Cache
905905
906-
In some circumstances you may be able to provide the initial data for a query from the cached result of another. A good example of this would be searching the cached data from a todos list query for an individual todo item, then using that as the initial data for your individual todo query:
906+
In some circumstances, you may be able to provide the initial data for a query from the cached result of another. A good example of this would be searching the cached data from a todos list query for an individual todo item, then using that as the initial data for your individual todo query:
907907
908908
```js
909909
function Todo({ todoId }) {
@@ -916,7 +916,7 @@ function Todo({ todoId }) {
916916
}
917917
```
918918
919-
Most of the time, this pattern works well, but if your source query you're using to look up the intitial data from is old, you may not want to use the data at all and just fetch from the server. To make this decision easier, you can use the `queryCache.getQuery` method instead to get more information about the source query, including an `updatedAt` timestamp you can use to decide if the query is "fresh" enough for your needs:
919+
Most of the time, this pattern works well, but if your source query you're using to look up the initial data from is old, you may not want to use the data at all and just fetch from the server. To make this decision easier, you can use the `queryCache.getQuery` method instead to get more information about the source query, including an `updatedAt` timestamp you can use to decide if the query is "fresh" enough for your needs:
920920
921921
```js
922922
function Todo({ todoId }) {
@@ -1003,7 +1003,7 @@ In addition to queries behaving differently in suspense mode, mutations also beh
10031003
10041004
Out of the box, React Query in `suspense` mode works really well as a **Fetch-on-render** solution with no additional configuration. However, if you want to take it to the next level and implement a `Fetch-as-you-render` model, we recommend implementing [Prefetching](#prefetching) on routing and/or user interactions events to initialize queries before they are needed.
10051005
1006-
## Cancelling Query Requests
1006+
## Canceling Query Requests
10071007
10081008
By default, queries that become inactive before their promises are resolved are simply ignored instead of cancelled. Why is this?
10091009
@@ -1124,7 +1124,7 @@ Even with just variables, mutations aren't all that special, but when used with
11241124
11251125
## Invalidate and Refetch Queries from Mutations
11261126
1127-
When a mutation succeeds, it's likely that other queries in your application need to update. Where other libraries that use normalized caches would attempt to update locale queries with the new data imperatively, React Query helps you avoids the manual labor that come with maintainig normalized caches and instead prescribes **atomic updates and refetching** instead of direct cache manipulation.
1127+
When a mutation succeeds, it's likely that other queries in your application need to update. Where other libraries that use normalized caches would attempt to update locale queries with the new data imperatively, React Query helps you avoids the manual labor that comes with maintaining normalized caches and instead prescribes **atomic updates and refetching** instead of direct cache manipulation.
11281128
11291129
For example, assume we have a mutation to post a new todo:
11301130
@@ -1242,7 +1242,7 @@ const [mutate] = useMutation(addTodo, {
12421242
mutate(todo)
12431243
```
12441244
1245-
You might find that you want to override some of `useMutation`'s optoins at the time of calling `mutate`. To do that, you can optionally override them by sending them through as options to the `mutate` function after your mutation variable. Supported option overrides are include:
1245+
You might find that you want to override some of `useMutation`'s options at the time of calling `mutate`. To do that, you can optionally override them by sending them through as options to the `mutate` function after your mutation variable. Supported option overrides are include:
12461246
12471247
- `onSuccess`
12481248
- `onSettled`
@@ -2059,7 +2059,7 @@ const promise = mutate(variables, {
20592059
- If a promise is returned, it will be awaited and resolved before proceeding
20602060
- `onSettled: Function(data, error) => Promise | undefined`
20612061
- Optional
2062-
- This function will fire when the mutation is is either successfully fetched or encounters an error and be passed either the data or error
2062+
- This function will fire when the mutation is either successfully fetched or encounters an error and be passed either the data or error
20632063
- If a promise is returned, it will be awaited and resolved before proceeding
20642064
- `throwOnError`
20652065
- Defaults to `false`
@@ -2133,7 +2133,7 @@ The options for `prefetchQuery` are exactly the same as those of [`useQuery`](#u
21332133
21342134
## `queryCache.getQueryData`
21352135
2136-
`getQueryData` is an synchronous function that can be used to get an existing query's cached data. If the query does not exist, `undefined` will be returned.
2136+
`getQueryData` is a synchronous function that can be used to get an existing query's cached data. If the query does not exist, `undefined` will be returned.
21372137
21382138
```js
21392139
import { getQueryData } from 'react-query'
@@ -2207,7 +2207,7 @@ const queries = queryCache.refetchQueries(inclusiveQueryKeyOrPredicateFn, {
22072207
- This predicate function will be called for every single query in the cache and be expected to return truthy for queries that are `found`.
22082208
- The `exact` option has no effect with using a function
22092209
- `exact: Boolean`
2210-
- If you don't want to search queries inclusively by query key, you can pass the `exact: true` option to return only the query with the exact query key you have passed. Don't remember to destructure it ouf of the array!
2210+
- If you don't want to search queries inclusively by query key, you can pass the `exact: true` option to return only the query with the exact query key you have passed. Don't remember to destructure it out of the array!
22112211
- `throwOnError: Boolean`
22122212
- When set to `true`, this function will throw if any of the query refetch tasks fail.
22132213

@@ -2236,15 +2236,15 @@ const queries = queryCache.removeQueries(queryKeyOrPredicateFn, {
22362236
- This predicate function will be called for every single query in the cache and be expected to return truthy for queries that are `found`.
22372237
- The `exact` option has no effect with using a function
22382238
- `exact: Boolean`
2239-
- If you don't want to search queries inclusively by query key, you can pass the `exact: true` option to return only the query with the exact query key you have passed. Don't remember to destructure it ouf of the array!
2239+
- If you don't want to search queries inclusively by query key, you can pass the `exact: true` option to return only the query with the exact query key you have passed. Don't remember to destructure it out of the array!
22402240

22412241
### Returns
22422242

22432243
This function does not return anything
22442244

22452245
## `queryCache.getQuery`
22462246

2247-
`getQuery` is an slightly more advanced synchronous function that can be used to get an existing query object from the cache. This object not only contains **all** the state for the query, but all of the instances, and underlying guts of the query as well. If the query does not exist, `undefined` will be returned.
2247+
`getQuery` is a slightly more advanced synchronous function that can be used to get an existing query object from the cache. This object not only contains **all** the state for the query, but all of the instances, and underlying guts of the query as well. If the query does not exist, `undefined` will be returned.
22482248

22492249
> Note: This is not typically needed for most applications, but can come in handy when needing more information about a query in rare scenarios (eg. Looking at the query.updatedAt timestamp to decide whether a query is fresh enough to be used as an initial value)
22502250

@@ -2266,7 +2266,7 @@ const query = getQuery(queryKey)
22662266
22672267
## `queryCache.isFetching`
22682268
2269-
This `isFetching` property is an `integer` representing how many queries, if any, in the cache are currently fetching (including backround-fetching, loading new pages, or loading more infinite query results)
2269+
This `isFetching` property is an `integer` representing how many queries, if any, in the cache are currently fetching (including background-fetching, loading new pages, or loading more infinite query results)
22702270
22712271
```js
22722272
import { queryCache } from 'react-query'
@@ -2374,7 +2374,7 @@ function App() {
23742374
23752375
- `config: Object`
23762376
- Must be **stable** or **memoized**. Do not create an inline object!
2377-
- For non global properties please see their usage in both the [`useQuery` hook](#usequery) and the [`useMutation` hook](#usemutation).
2377+
- For non-global properties please see their usage in both the [`useQuery` hook](#usequery) and the [`useMutation` hook](#usemutation).
23782378
23792379
## `setConsole`
23802380

0 commit comments

Comments
 (0)