commit b981b388ee9ed0066399a632aad6b84559f014a6 · kitten.sh/urql

.changeset/short-crews-retire.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       '@urql/vue': minor

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       Fix regression breaking `variables` typing

+7 -4

packages/vue-urql/src/useMutation.ts

···

       15
       15
        
       } from '@urql/core';

     

       16
       16
        
       

     

       17
       17
        
       import { useClient } from './useClient';

     

       18
       18
       -
       import type { MaybeRef } from './utils';

     

       19
       19
       -
       import { createRequestWithArgs, useRequestState } from './utils';

     

       18
       18
       +
       import {

     

       19
       19
       +
         createRequestWithArgs,

     

       20
       20
       +
         type MaybeRefOrGetter,

     

       21
       21
       +
         useRequestState,

     

       22
       22
       +
       } from './utils';

     

       20
       23
        
       

     

       21
       24
        
       /** State of the last mutation executed by {@link useMutation}.

     

       22
       25
        
        *

     
···

       132
       135
        
       }

     

       133
       136
        
       

     

       134
       137
        
       export function callUseMutation<T = any, V extends AnyVariables = AnyVariables>(

     

       135
       135
       -
         query: MaybeRef<DocumentInput<T, V>>,

     

       138
       138
       +
         query: MaybeRefOrGetter<DocumentInput<T, V>>,

     

       136
       139
        
         client: Ref<Client> = useClient()

     

       137
       140
        
       ): UseMutationResponse<T, V> {

     

       138
       141
        
         const data: Ref<T | undefined> = shallowRef();

     
···

       156
       159
        
       

     

       157
       160
        
             return pipe(

     

       158
       161
        
               client.value.executeMutation<T, V>(

     

       159
       159
       -
                 createRequestWithArgs({ query, variables }),

     

       162
       162
       +
                 createRequestWithArgs<T, V>({ query, variables }),

     

       160
       163
        
                 context || {}

     

       161
       164
        
               ),

     

       162
       165
        
               onPush(result => {

+39 -99

packages/vue-urql/src/useQuery.test.ts

···

       120
       120
        
           );

     

       121
       121
        
         });

     

       122
       122
        
       

     

       123
       123
       -
         it('runs a query with different variables', async () => {

     

       124
       124
       -
           const simpleVariables = {

     

       125
       125
       -
             null: null,

     

       126
       126
       -
             NaN: NaN,

     

       127
       127
       -
             empty: '',

     

       128
       128
       -
             bool: false,

     

       129
       129
       -
             int: 1,

     

       130
       130
       -
             float: 1.1,

     

       131
       131
       -
             string: 'string',

     

       132
       132
       -
             blob: new Blob(),

     

       133
       133
       -
             date: new Date(),

     

       134
       134
       -
           };

     

       135
       135
       -
       

     

       136
       136
       -
           const variablesSet = {

     

       137
       137
       -
             func: () => 'func',

     

       138
       138
       -
             ref: ref('ref'),

     

       139
       139
       -
             computed: computed(() => 'computed'),

     

       140
       140
       -
             ...simpleVariables,

     

       141
       141
       -
           };

     

       142
       142
       -
       

     

       143
       143
       -
           const variablesSetUnwrapped = {

     

       144
       144
       -
             func: 'func',

     

       145
       145
       -
             ref: 'ref',

     

       146
       146
       -
             computed: 'computed',

     

       147
       147
       -
             ...simpleVariables,

     

       148
       148
       -
           };

     

       149
       149
       -
       

     

       150
       150
       -
           const { query$ } = createQuery({

     

       151
       151
       -
             query: ref('{ test }'),

     

       152
       152
       -
             variables: {

     

       153
       153
       -
               ...variablesSet,

     

       154
       154
       -
               nested: variablesSet,

     

       155
       155
       -
               array: [variablesSet],

     

       156
       156
       -
             },

     

       157
       157
       -
           });

     

       158
       158
       -
       

     

       159
       159
       -
           await query$;

     

       160
       160
       -
       

     

       161
       161
       -
           expect(query$.operation.value?.variables).toStrictEqual({

     

       162
       162
       -
             ...variablesSetUnwrapped,

     

       163
       163
       -
             nested: variablesSetUnwrapped,

     

       164
       164
       -
             array: [variablesSetUnwrapped],

     

       165
       165
       -
           });

     

       166
       166
       -
         });

     

       167
       167
       -
       

     

       168
       123
        
         it('reacts to ref variables changing', async () => {

     

       169
       124
        
           const variables = ref({ prop: 1 });

     

       170
       125
        
       

     
···

       188
       143
        
           expect(query$.operation.value).toHaveProperty('variables.prop', 3);

     

       189
       144
        
         });

     

       190
       145
        
       

     

       191
       191
       -
         it('reacts to nested ref variables changing', async () => {

     

       192
       192
       -
           const prop = ref(1);

     

       146
       146
       +
         it('reacts to ref variables changing', async () => {

     

       147
       147
       +
           const foo = ref(1);

     

       148
       148
       +
           const bar = ref(1);

     

       193
       149
        
       

     

       194
       150
        
           const { executeQuery, query$ } = createQuery({

     

       195
       151
        
             query: ref('{ test }'),

     

       196
       196
       -
             variables: { prop },

     

       152
       152
       +
             variables: ref({

     

       153
       153
       +
               prop: foo,

     

       154
       154
       +
               nested: {

     

       155
       155
       +
                 prop: bar,

     

       156
       156
       +
               },

     

       157
       157
       +
             }),

     

       197
       158
        
           });

     

       198
       159
        
       

     

       199
       160
        
           await query$;

     

       200
       161
        
           expect(executeQuery).toHaveBeenCalledTimes(1);

     

       201
       162
        
           expect(query$.operation.value).toHaveProperty('variables.prop', 1);

     

       202
       163
        
       

     

       203
       203
       -
           prop.value++;

     

       164
       164
       +
           foo.value++;

     

       204
       165
        
           await query$;

     

       205
       166
        
           expect(executeQuery).toHaveBeenCalledTimes(2);

     

       206
       167
        
           expect(query$.operation.value).toHaveProperty('variables.prop', 2);

     

       168
       168
       +
       

     

       169
       169
       +
           bar.value++;

     

       170
       170
       +
           await query$;

     

       171
       171
       +
           expect(executeQuery).toHaveBeenCalledTimes(3);

     

       172
       172
       +
           expect(query$.operation.value).toHaveProperty('variables.nested.prop', 2);

     

       207
       173
        
         });

     

       208
       174
        
       

     

       209
       209
       -
         it('reacts to deep nested ref variables changing', async () => {

     

       210
       210
       -
           const prop = ref(1);

     

       175
       175
       +
         it('reacts to getter variables changing', async () => {

     

       176
       176
       +
           const foo = ref(1);

     

       177
       177
       +
           const bar = ref(1);

     

       211
       178
        
       

     

       212
       179
        
           const { executeQuery, query$ } = createQuery({

     

       213
       180
        
             query: ref('{ test }'),

     

       214
       214
       -
             variables: { deep: { nested: { prop } } },

     

       181
       181
       +
             variables: () => ({

     

       182
       182
       +
               prop: foo.value,

     

       183
       183
       +
               nested: {

     

       184
       184
       +
                 prop: bar.value,

     

       185
       185
       +
               },

     

       186
       186
       +
             }),

     

       215
       187
        
           });

     

       216
       188
        
       

     

       217
       189
        
           await query$;

     

       218
       190
        
           expect(executeQuery).toHaveBeenCalledTimes(1);

     

       219
       219
       -
           expect(query$.operation.value).toHaveProperty(

     

       220
       220
       -
             'variables.deep.nested.prop',

     

       221
       221
       -
             1

     

       222
       222
       -
           );

     

       191
       191
       +
           expect(query$.operation.value).toHaveProperty('variables.prop', 1);

     

       223
       192
        
       

     

       224
       224
       -
           prop.value++;

     

       193
       193
       +
           foo.value++;

     

       225
       194
        
           await query$;

     

       226
       195
        
           expect(executeQuery).toHaveBeenCalledTimes(2);

     

       227
       227
       -
           expect(query$.operation.value).toHaveProperty(

     

       228
       228
       -
             'variables.deep.nested.prop',

     

       229
       229
       -
             2

     

       230
       230
       -
           );

     

       196
       196
       +
           expect(query$.operation.value).toHaveProperty('variables.prop', 2);

     

       197
       197
       +
       

     

       198
       198
       +
           bar.value++;

     

       199
       199
       +
           await query$;

     

       200
       200
       +
           expect(executeQuery).toHaveBeenCalledTimes(3);

     

       201
       201
       +
           expect(query$.operation.value).toHaveProperty('variables.nested.prop', 2);

     

       231
       202
        
         });

     

       232
       203
        
       

     

       233
       204
        
         it('reacts to reactive variables changing', async () => {

     
···

       258
       229
        
         });

     

       259
       230
        
       

     

       260
       231
        
         it('reacts to computed variables changing', async () => {

     

       261
       261
       -
           const prop = ref(1);

     

       262
       262
       -
           const prop2 = ref(1);

     

       232
       232
       +
           const foo = ref(1);

     

       233
       233
       +
           const bar = ref(1);

     

       263
       234
        
           const variables = computed(() => ({

     

       264
       264
       -
             prop: prop.value,

     

       265
       265
       -
             deep: { nested: { prop2 } },

     

       235
       235
       +
             prop: foo.value,

     

       236
       236
       +
             deep: { nested: { prop: bar.value } },

     

       266
       237
        
           }));

     

       267
       238
        
       

     

       268
       239
        
           const { executeQuery, query$ } = createQuery({

     
···

       274
       245
        
           expect(executeQuery).toHaveBeenCalledTimes(1);

     

       275
       246
        
           expect(query$.operation.value).toHaveProperty('variables.prop', 1);

     

       276
       247
        
       

     

       277
       277
       -
           prop.value++;

     

       248
       248
       +
           foo.value++;

     

       278
       249
        
           await query$;

     

       279
       250
        
           expect(executeQuery).toHaveBeenCalledTimes(2);

     

       280
       251
        
           expect(query$.operation.value).toHaveProperty('variables.prop', 2);

     

       281
       252
        
       

     

       282
       282
       -
           prop2.value++;

     

       253
       253
       +
           bar.value++;

     

       283
       254
        
           await query$;

     

       284
       255
        
           expect(executeQuery).toHaveBeenCalledTimes(3);

     

       285
       256
        
           expect(query$.operation.value).toHaveProperty(

     

       286
       286
       -
             'variables.deep.nested.prop2',

     

       287
       287
       -
             2

     

       288
       288
       -
           );

     

       289
       289
       -
         });

     

       290
       290
       -
       

     

       291
       291
       -
         it('reacts to callback variables changing', async () => {

     

       292
       292
       -
           const prop = ref(1);

     

       293
       293
       -
           const prop2 = ref(1);

     

       294
       294
       -
           const variables = () => ({

     

       295
       295
       -
             prop: prop.value,

     

       296
       296
       -
             deep: { nested: { prop2 } },

     

       297
       297
       -
           });

     

       298
       298
       -
       

     

       299
       299
       -
           const { executeQuery, query$ } = createQuery({

     

       300
       300
       -
             query: ref('{ test }'),

     

       301
       301
       -
             variables,

     

       302
       302
       -
           });

     

       303
       303
       -
       

     

       304
       304
       -
           await query$;

     

       305
       305
       -
           expect(executeQuery).toHaveBeenCalledTimes(1);

     

       306
       306
       -
           expect(query$.operation.value).toHaveProperty('variables.prop', 1);

     

       307
       307
       -
       

     

       308
       308
       -
           prop.value++;

     

       309
       309
       -
           await query$;

     

       310
       310
       -
           expect(executeQuery).toHaveBeenCalledTimes(2);

     

       311
       311
       -
           expect(query$.operation.value).toHaveProperty('variables.prop', 2);

     

       312
       312
       -
       

     

       313
       313
       -
           prop2.value++;

     

       314
       314
       -
           await query$;

     

       315
       315
       -
           expect(executeQuery).toHaveBeenCalledTimes(3);

     

       316
       316
       -
           expect(query$.operation.value).toHaveProperty(

     

       317
       317
       -
             'variables.deep.nested.prop2',

     

       257
       257
       +
             'variables.deep.nested.prop',

     

       318
       258
        
             2

     

       319
       259
        
           );

     

       320
       260
        
         });

+9 -10

packages/vue-urql/src/useQuery.ts

···

       18
       18
        
       

     

       19
       19
        
       import { useClient } from './useClient';

     

       20
       20
        
       

     

       21
       21
       -
       import type { MaybeRef, MaybeRefObj } from './utils';

     

       21
       21
       +
       import type { MaybeRefOrGetter, MaybeRefOrGetterObj } from './utils';

     

       22
       22
        
       import { useRequestState, useClientState } from './utils';

     

       23
       23
        
       

     

       24
       24
        
       /** Input arguments for the {@link useQuery} function.

     
···

       42
       42
        
          *

     

       43
       43
        
          * @see {@link OperationContext.requestPolicy} for where this value is set.

     

       44
       44
        
          */

     

       45
       45
       -
         requestPolicy?: MaybeRef<RequestPolicy>;

     

       45
       45
       +
         requestPolicy?: MaybeRefOrGetter<RequestPolicy>;

     

       46
       46
        
         /** Updates the {@link OperationContext} for the executed GraphQL query operation.

     

       47
       47
        
          *

     

       48
       48
        
          * @remarks

     
···

       60
       60
        
          * });

     

       61
       61
        
          * ```

     

       62
       62
        
          */

     

       63
       63
       -
         context?: MaybeRef<Partial<OperationContext>>;

     

       63
       63
       +
         context?: MaybeRefOrGetter<Partial<OperationContext>>;

     

       64
       64
        
         /** Prevents {@link useQuery} from automatically executing GraphQL query operations.

     

       65
       65
        
          *

     

       66
       66
        
          * @remarks

     
···

       72
       72
        
          * @see {@link https://urql.dev/goto/docs/basics/vue#pausing-usequery} for

     

       73
       73
        
          * documentation on the `pause` option.

     

       74
       74
        
          */

     

       75
       75
       -
         pause?: MaybeRef<boolean>;

     

       76
       76
       -
       } & MaybeRefObj<GraphQLRequestParams<Data, MaybeRefObj<Variables>>>;

     

       75
       75
       +
         pause?: MaybeRefOrGetter<boolean>;

     

       76
       76
       +
       } & MaybeRefOrGetterObj<GraphQLRequestParams<Data, Variables>>;

     

       77
       77
        
       

     

       78
       78
        
       /** State of the current query, your {@link useQuery} function is executing.

     

       79
       79
        
        *

     
···

       246
       246
        
         const { fetching, operation, extensions, stale, error, hasNext } =

     

       247
       247
        
           useRequestState<T, V>();

     

       248
       248
        
       

     

       249
       249
       -
         const { isPaused, source, pause, resume, execute, teardown } = useClientState(

     

       250
       250
       -
           args,

     

       251
       251
       -
           client,

     

       252
       252
       -
           'executeQuery'

     

       253
       253
       -
         );

     

       249
       249
       +
         const { isPaused, source, pause, resume, execute, teardown } = useClientState<

     

       250
       250
       +
           T,

     

       251
       251
       +
           V

     

       252
       252
       +
         >(args, client, 'executeQuery');

     

       254
       253
        
       

     

       255
       254
        
         const teardownQuery = watchEffect(

     

       256
       255
        
           onInvalidate => {

+8 -9

packages/vue-urql/src/useSubscription.ts

···

       16
       16
        
       

     

       17
       17
        
       import { useClient } from './useClient';

     

       18
       18
        
       

     

       19
       19
       -
       import type { MaybeRef, MaybeRefObj } from './utils';

     

       19
       19
       +
       import type { MaybeRefOrGetter, MaybeRefOrGetterObj } from './utils';

     

       20
       20
        
       import { useRequestState, useClientState } from './utils';

     

       21
       21
        
       

     

       22
       22
        
       /** Input arguments for the {@link useSubscription} function.

     
···

       36
       36
        
          * {@link UseSubscriptionResponse.resume} is called, or, if `pause` is a reactive

     

       37
       37
        
          * ref of a boolean, until this ref changes to `true`.

     

       38
       38
        
          */

     

       39
       39
       -
         pause?: MaybeRef<boolean>;

     

       39
       39
       +
         pause?: MaybeRefOrGetter<boolean>;

     

       40
       40
        
         /** Updates the {@link OperationContext} for the executed GraphQL subscription operation.

     

       41
       41
        
          *

     

       42
       42
        
          * @remarks

     
···

       54
       54
        
          * });

     

       55
       55
        
          * ```

     

       56
       56
        
          */

     

       57
       57
       -
         context?: MaybeRef<Partial<OperationContext>>;

     

       58
       58
       -
       } & MaybeRefObj<GraphQLRequestParams<Data, MaybeRefObj<Variables>>>;

     

       57
       57
       +
         context?: MaybeRefOrGetter<Partial<OperationContext>>;

     

       58
       58
       +
       } & MaybeRefOrGetterObj<GraphQLRequestParams<Data, Variables>>;

     

       59
       59
        
       

     

       60
       60
        
       /** Combines previous data with an incoming subscription result’s data.

     

       61
       61
        
        *

     
···

       246
       246
        
           V

     

       247
       247
        
         >();

     

       248
       248
        
       

     

       249
       249
       -
         const { isPaused, source, pause, resume, execute, teardown } = useClientState(

     

       250
       250
       -
           args,

     

       251
       251
       -
           client,

     

       252
       252
       -
           'executeSubscription'

     

       253
       253
       -
         );

     

       249
       249
       +
         const { isPaused, source, pause, resume, execute, teardown } = useClientState<

     

       250
       250
       +
           T,

     

       251
       251
       +
           V

     

       252
       252
       +
         >(args, client, 'executeSubscription');

     

       254
       253
        
       

     

       255
       254
        
         const teardownSubscription = watchEffect(onInvalidate => {

     

       256
       255
        
           if (source.value) {

+20 -63

packages/vue-urql/src/utils.ts

···

       3
       3
        
         Client,

     

       4
       4
        
         CombinedError,

     

       5
       5
        
         DocumentInput,

     

       6
       6
       +
         GraphQLRequest,

     

       6
       7
        
         Operation,

     

       7
       8
        
         OperationContext,

     

       8
       9
        
         OperationResult,

     

       9
       10
        
         OperationResultSource,

     

       10
       11
        
       } from '@urql/core';

     

       11
       12
        
       import { createRequest } from '@urql/core';

     

       12
       12
       -
       import type { Ref } from 'vue';

     

       13
       13
       +
       import { type Ref, unref } from 'vue';

     

       13
       14
        
       import { watchEffect, isReadonly, computed, ref, shallowRef, isRef } from 'vue';

     

       14
       15
        
       import type { UseSubscriptionArgs } from './useSubscription';

     

       15
       16
        
       import type { UseQueryArgs } from './useQuery';

     

       16
       17
        
       

     

       17
       17
       -
       export type MaybeRef<T> = T | (() => T) | Ref<T>;

     

       18
       18
       -
       export type MaybeRefObj<T> = T extends {}

     

       19
       19
       -
         ? { [K in keyof T]: MaybeRef<T[K]> }

     

       20
       20
       -
         : T;

     

       21
       21
       -
       

     

       22
       22
       -
       const unwrap = <T>(maybeRef: MaybeRef<T>): T =>

     

       23
       23
       -
         typeof maybeRef === 'function'

     

       24
       24
       -
           ? (maybeRef as () => T)()

     

       25
       25
       -
           : maybeRef != null && isRef(maybeRef)

     

       26
       26
       -
             ? maybeRef.value

     

       27
       27
       -
             : maybeRef;

     

       28
       28
       -
       

     

       29
       29
       -
       const isPlainObject = (value: any): boolean => {

     

       30
       30
       -
         if (typeof value !== 'object' || value === null) return false;

     

       31
       31
       -
         return (

     

       32
       32
       -
           value.constructor &&

     

       33
       33
       -
           Object.getPrototypeOf(value).constructor === Object.prototype.constructor

     

       34
       34
       -
         );

     

       35
       35
       -
       };

     

       36
       36
       -
       export const isArray = Array.isArray;

     

       18
       18
       +
       export type MaybeRefOrGetter<T> = T | (() => T) | Ref<T>;

     

       19
       19
       +
       export type MaybeRefOrGetterObj<T extends {}> =

     

       20
       20
       +
         T extends Record<string, never>

     

       21
       21
       +
           ? T

     

       22
       22
       +
           : { [K in keyof T]: MaybeRefOrGetter<T[K]> };

     

       37
       23
        
       

     

       38
       38
       -
       const unwrapDeeply = <T>(input: T): T => {

     

       39
       39
       -
         input = isRef(input) ? (input.value as T) : input;

     

       24
       24
       +
       const isFunction = <T>(val: MaybeRefOrGetter<T>): val is () => T =>

     

       25
       25
       +
         typeof val === 'function';

     

       40
       26
        
       

     

       41
       41
       -
         if (typeof input === 'function') {

     

       42
       42
       -
           return unwrapDeeply(input()) as T;

     

       43
       43
       -
         }

     

       44
       44
       -
       

     

       45
       45
       -
         if (input && typeof input === 'object') {

     

       46
       46
       -
           if (isArray(input)) {

     

       47
       47
       -
             const length = input.length;

     

       48
       48
       -
             const out = new Array(length) as T;

     

       49
       49
       -
             let i = 0;

     

       50
       50
       -
             for (; i < length; i++) {

     

       51
       51
       -
               out[i] = unwrapDeeply(input[i]);

     

       52
       52
       -
             }

     

       53
       53
       -
       

     

       54
       54
       -
             return out;

     

       55
       55
       -
           } else if (isPlainObject(input)) {

     

       56
       56
       -
             const keys = Object.keys(input);

     

       57
       57
       -
             const length = keys.length;

     

       58
       58
       -
             let i = 0;

     

       59
       59
       -
             let key: string;

     

       60
       60
       -
             const out = {} as T;

     

       61
       61
       -
       

     

       62
       62
       -
             for (; i < length; i++) {

     

       63
       63
       -
               key = keys[i];

     

       64
       64
       -
               out[key] = unwrapDeeply(input[key]);

     

       65
       65
       -
             }

     

       66
       66
       -
       

     

       67
       67
       -
             return out;

     

       68
       68
       -
           }

     

       69
       69
       -
         }

     

       70
       70
       -
       

     

       71
       71
       -
         return input;

     

       72
       72
       -
       };

     

       27
       27
       +
       const toValue = <T>(source: MaybeRefOrGetter<T>): T =>

     

       28
       28
       +
         isFunction(source) ? source() : unref(source);

     

       73
       29
        
       

     

       74
       30
        
       export const createRequestWithArgs = <

     

       75
       31
        
         T = any,

     
···

       78
       34
        
         args:

     

       79
       35
        
           | UseQueryArgs<T, V>

     

       80
       36
        
           | UseSubscriptionArgs<T, V>

     

       81
       81
       -
           | { query: MaybeRef<DocumentInput<T, V>>; variables: V }

     

       82
       82
       -
       ) => {

     

       37
       37
       +
           | { query: MaybeRefOrGetter<DocumentInput<T, V>>; variables: V }

     

       38
       38
       +
       ): GraphQLRequest<T, V> => {

     

       39
       39
       +
         const _args = toValue(args);

     

       83
       40
        
         return createRequest<T, V>(

     

       84
       84
       -
           unwrap(args.query),

     

       85
       85
       -
           unwrapDeeply(args.variables) as V

     

       41
       41
       +
           toValue(_args.query),

     

       42
       42
       +
           toValue(_args.variables as MaybeRefOrGetter<V>)

     

       86
       43
        
         );

     

       87
       44
        
       };

     

       88
       45
        
       

     
···

       120
       77
        
             ? computed(args.pause)

     

       121
       78
        
             : ref(!!args.pause);

     

       122
       79
        
       

     

       123
       123
       -
         const request = computed(() => createRequestWithArgs(args));

     

       80
       80
       +
         const request = computed(() => createRequestWithArgs<T, V>(args));

     

       124
       81
        
       

     

       125
       82
        
         const requestOptions = computed(() => {

     

       126
       83
        
           return 'requestPolicy' in args

     

       127
       84
        
             ? {

     

       128
       128
       -
                 requestPolicy: unwrap(args.requestPolicy),

     

       129
       129
       -
                 ...unwrap(args.context),

     

       85
       85
       +
                 requestPolicy: toValue(args.requestPolicy),

     

       86
       86
       +
                 ...toValue(args.context),

     

       130
       87
        
               }

     

       131
       88
        
             : {

     

       132
       132
       -
                 ...unwrap(args.context),

     

       89
       89
       +
                 ...toValue(args.context),

     

       133
       90
        
               };

     

       134
       91
        
         });

     

       135
       92