Skip to content

Commit

Permalink
feat: remove initialIsFetching and sync it with fetchOnMount
Browse files Browse the repository at this point in the history
  • Loading branch information
@logaretm
logaretm committed Jan 2, 2021
1 parent 8307ab3 commit a1e75c4
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 49 deletions.
17 changes: 8 additions & 9 deletions docs/content/api/query.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,14 @@ The **Query** component is **renderless** by default, meaning it will not render

The `Query` component accepts the following props:

| Prop | Type | Required | Description |
| ----------------- | -------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
| query | `string` or `DocumentNode` | **Yes** | The query to be executed |
| variables | `object` | **No** | The query variables |
| cachePolicy | A `string` with those possible values `cache-and-network` or `network-only` or `cache-first` | **No** | The cache policy to execute the query with, defaults to the value configured with the provided client |
| fetchOnMount | `boolean` | **No** | If the query **should be** be executed on `onMounted` lifecycle hook, default is `true` |
| suspended | `boolean` | **No** | If the component is suspended with `Suspend` or not, defaults to `false` |
| watchVariables | `boolean` | **No** | If the query variable watching is disabled or not, defaults to `true` |
| initialIsFetching | `boolean` | **No** | Sets `isFetching` to an initial value |
| Prop | Type | Required | Description |
| -------------- | -------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
| query | `string` or `DocumentNode` | **Yes** | The query to be executed |
| variables | `object` | **No** | The query variables |
| cachePolicy | A `string` with those possible values `cache-and-network` or `network-only` or `cache-first` | **No** | The cache policy to execute the query with, defaults to the value configured with the provided client |
| fetchOnMount | `boolean` | **No** | If the query **should be** be executed on `onMounted` lifecycle hook, default is `true` |
| suspended | `boolean` | **No** | If the component is suspended with `Suspend` or not, defaults to `false` |
| watchVariables | `boolean` | **No** | If the query variable watching is disabled or not, defaults to `true` |

## Slot Props

Expand Down
13 changes: 6 additions & 7 deletions docs/content/api/use-query.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,12 @@ const { data, error } = useQuery({

This is the full object fields that the `useQuery` function accepts:

| Property | Type | Required | Description |
| ----------------- | -------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
| query | `string` or `DocumentNode` or `Ref<string>` | **Yes** | The query to be executed |
| variables | `object` or `Ref<object>` | **No** | The query variables |
| cachePolicy | A `string` with those possible values `cache-and-network` or `network-only` or `cache-first` | **No** | The cache policy to execute the query with, defaults to the value configured with the provided client |
| fetchOnMount | `boolean` | **No** | If the query **should be** executed on `mounted`, default is `true` |
| initialIsFetching | `boolean` | **No** | Setting an initial `isFetching` value, default is `false` |
| Property | Type | Required | Description |
| ------------ | -------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
| query | `string` or `DocumentNode` or `Ref<string>` | **Yes** | The query to be executed |
| variables | `object` or `Ref<object>` | **No** | The query variables |
| cachePolicy | A `string` with those possible values `cache-and-network` or `network-only` or `cache-first` | **No** | The cache policy to execute the query with, defaults to the value configured with the provided client |
| fetchOnMount | `boolean` | **No** | If the query **should be** executed on `mounted`, default is `true` |

This signature allows you to tweak the `fetchOnMount` and `cachePolicy` behaviors for the query, Here is an example:

Expand Down
23 changes: 2 additions & 21 deletions docs/content/guide/queries.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -488,27 +488,8 @@ export default {

Whenever a re-fetch is triggered, or the query was executed again the `isFetching` will be updated accordingly so you don't have to keep it in sync with anything nor you have to create your own boolean refs for indications.

<doc-tip title="Initial isFetching">
<doc-tip title="Initial isFetching value">

Because `isFetching` is initially set to `false`, you might see a flash of your content due to the default fetching behavior when the component mounts, so there is a short time before it is set to `true`.

To avoid this you could set the `isFetching` value either by setting it directly:

```js
const { data, isFetching } = useQuery({
query: GetPosts,
});

isFetching.value = true;
```

Or you could set it in the query options:

```js
const { data, isFetching } = useQuery({
query: GetPosts,
initialIsFetching: true,
});
```
Is fetching default value is `true` if `fetchOnMount` is enabled, otherwise it will start off with `false`.

</doc-tip>
5 changes: 0 additions & 5 deletions packages/villus/src/Query.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@ export const Query = defineComponent({
type: Boolean,
default: true,
},
initialIsFetching: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
function createRenderFn(api: ReturnType<typeof useQuery>) {
Expand Down Expand Up @@ -74,7 +70,6 @@ export const Query = defineComponent({
variables: toRef(props, 'variables') as Ref<Record<string, any> | undefined>,
fetchOnMount: props.fetchOnMount,
cachePolicy: props.cachePolicy as CachePolicy,
initialIsFetching: props.initialIsFetching,
};

if (props.suspended) {
Expand Down
6 changes: 2 additions & 4 deletions packages/villus/src/useQuery.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ interface QueryCompositeOptions<TData, TVars> {
variables?: MaybeReactive<TVars>;
cachePolicy?: CachePolicy;
fetchOnMount?: boolean;
initialIsFetching?: boolean;
}

interface QueryExecutionOpts {
Expand All @@ -21,9 +20,9 @@ function useQuery<TData = any, TVars = QueryVariables>(opts: QueryCompositeOptio
return new Error('Cannot detect villus Client, did you forget to call `useClient`?');
});

let { query, variables, cachePolicy, fetchOnMount, initialIsFetching } = normalizeOptions(opts);
let { query, variables, cachePolicy, fetchOnMount } = normalizeOptions(opts);
const data: Ref<TData | null> = ref(null);
const isFetching = ref(initialIsFetching);
const isFetching = ref(fetchOnMount);
const isDone = ref(false);
const error: Ref<CombinedError | null> = ref(null);

Expand Down Expand Up @@ -115,7 +114,6 @@ function normalizeOptions<TData, TVars>(
const defaultOpts = {
variables: {} as TVars,
fetchOnMount: true,
initialIsFetching: false,
};

return {
Expand Down
34 changes: 31 additions & 3 deletions packages/villus/test/useQuery.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -723,7 +723,34 @@ describe('useQuery()', () => {
expect(fetch).toHaveBeenCalledTimes(2); // only 2 unique queries were executed
});

test('can set initial isFetching value with initialIsFetching', async () => {
test('isFetching should start with true if fetchOnMount is true', async () => {
const spy = jest.fn();
mount({
setup() {
useClient({
url: 'https://test.com/graphql',
});

const { isFetching } = useQuery({
query: '{ posts { id title } }',
});

spy(isFetching.value);

return {
isFetching,
};
},
template: `<div id="el">{{ isFetching }}</div>`,
});

await flushPromises();
expect(spy).toHaveBeenCalledWith(true);
});

test('isFetching should start with false if fetchOnMount is false', async () => {
const spy = jest.fn();

mount({
setup() {
useClient({
Expand All @@ -733,9 +760,10 @@ describe('useQuery()', () => {
const { isFetching } = useQuery({
query: '{ posts { id title } }',
fetchOnMount: false,
initialIsFetching: true,
});

spy(isFetching.value);

return {
isFetching,
};
Expand All @@ -744,6 +772,6 @@ describe('useQuery()', () => {
});

await flushPromises();
expect(document.querySelector('#el')?.textContent).toBe('true');
expect(spy).toHaveBeenCalledWith(false);
});
});

0 comments on commit a1e75c4

Please sign in to comment.