commit f3dac26ff3929b51d9bc350af1b2775467e47438 · kitten.sh/urql

+85

.github/workflows/ci.yml

···

       50
       50
        
               run: yarn run lint

     

       51
       51
        
             - name: Unit Tests

     

       52
       52
        
               run: yarn run test --maxWorkers=2

     

       53
       53
       +
       

     

       54
       54
       +
         react-e2e:

     

       55
       55
       +
           name: React end-to-end tests

     

       56
       56
       +
           runs-on: ubuntu-latest

     

       57
       57
       +
           timeout-minutes: 10

     

       58
       58
       +
           steps:

     

       59
       59
       +
             - name: Checkout Repo

     

       60
       60
       +
               uses: actions/checkout@v3

     

       61
       61
       +
               with:

     

       62
       62
       +
                 fetch-depth: 0

     

       63
       63
       +
             - name: Setup Node

     

       64
       64
       +
               uses: actions/setup-node@v3

     

       65
       65
       +
               with:

     

       66
       66
       +
                 node-version: '16'

     

       67
       67
       +
             - name: Get Yarn cache directory

     

       68
       68
       +
               id: yarn-cache-dir-path

     

       69
       69
       +
               run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT

     

       70
       70
       +
       

     

       71
       71
       +
             - name: Use Yarn cache

     

       72
       72
       +
               uses: actions/cache@v3

     

       73
       73
       +
               id: yarn-cache

     

       74
       74
       +
               with:

     

       75
       75
       +
                 path: |

     

       76
       76
       +
                   ~/.cache/Cypress

     

       77
       77
       +
                   ${{ steps.yarn-cache-dir-path.outputs.dir }}

     

       78
       78
       +
                 key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

     

       79
       79
       +
                 restore-keys: |

     

       80
       80
       +
                   ${{ runner.os }}-yarn-

     

       81
       81
       +
             - name: Use node_modules cache

     

       82
       82
       +
               id: node-modules-cache

     

       83
       83
       +
               uses: actions/cache@v3

     

       84
       84
       +
               with:

     

       85
       85
       +
                 path: node_modules

     

       86
       86
       +
                 key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}

     

       87
       87
       +
             - name: Install Dependencies

     

       88
       88
       +
               if: |

     

       89
       89
       +
                 steps.yarn-cache.outputs.cache-hit != 'true' ||

     

       90
       90
       +
                 steps.node-modules-cache.outputs.cache-hit != 'true'

     

       91
       91
       +
               run: yarn install --prefer-offline --frozen-lockfile --non-interactive --silent

     

       53
       92
        
             - name: Build

     

       54
       93
        
               run: yarn workspace @urql/core build

     

       55
       94
        
             - name: e2e tests 🧪

     
···

       57
       96
        
               with:

     

       58
       97
        
                 command: yarn cypress run-ct

     

       59
       98
        
                 working-directory: packages/react-urql

     

       99
       99
       +
       

     

       100
       100
       +
         graphcache-e2e:

     

       101
       101
       +
           name: Graphcache end-to-end tests

     

       102
       102
       +
           runs-on: ubuntu-latest

     

       103
       103
       +
           timeout-minutes: 10

     

       104
       104
       +
           steps:

     

       105
       105
       +
             - name: Checkout Repo

     

       106
       106
       +
               uses: actions/checkout@v3

     

       107
       107
       +
               with:

     

       108
       108
       +
                 fetch-depth: 0

     

       109
       109
       +
             - name: Setup Node

     

       110
       110
       +
               uses: actions/setup-node@v3

     

       111
       111
       +
               with:

     

       112
       112
       +
                 node-version: '16'

     

       113
       113
       +
             - name: Get Yarn cache directory

     

       114
       114
       +
               id: yarn-cache-dir-path

     

       115
       115
       +
               run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT

     

       116
       116
       +
       

     

       117
       117
       +
             - name: Use Yarn cache

     

       118
       118
       +
               uses: actions/cache@v3

     

       119
       119
       +
               id: yarn-cache

     

       120
       120
       +
               with:

     

       121
       121
       +
                 path: |

     

       122
       122
       +
                   ~/.cache/Cypress

     

       123
       123
       +
                   ${{ steps.yarn-cache-dir-path.outputs.dir }}

     

       124
       124
       +
                 key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

     

       125
       125
       +
                 restore-keys: |

     

       126
       126
       +
                   ${{ runner.os }}-yarn-

     

       127
       127
       +
             - name: Use node_modules cache

     

       128
       128
       +
               id: node-modules-cache

     

       129
       129
       +
               uses: actions/cache@v3

     

       130
       130
       +
               with:

     

       131
       131
       +
                 path: node_modules

     

       132
       132
       +
                 key: ${{ runner.os }}-node-modules-${{ hashFiles('**/yarn.lock') }}

     

       133
       133
       +
             - name: Install Dependencies

     

       134
       134
       +
               if: |

     

       135
       135
       +
                 steps.yarn-cache.outputs.cache-hit != 'true' ||

     

       136
       136
       +
                 steps.node-modules-cache.outputs.cache-hit != 'true'

     

       137
       137
       +
               run: yarn install --prefer-offline --frozen-lockfile --non-interactive --silent

     

       138
       138
       +
             - name: Build

     

       139
       139
       +
               run: yarn workspace @urql/core build && yarn workspace urql build && yarn workspace @urql/exchange-execute build

     

       140
       140
       +
             - name: e2e tests 🧪

     

       141
       141
       +
               uses: cypress-io/github-action@v4

     

       142
       142
       +
               with:

     

       143
       143
       +
                 command: yarn cypress run-ct

     

       144
       144
       +
                 working-directory: exchanges/graphcache

     

       60
       145
        
       

     

       61
       146
        
         build:

     

       62
       147
        
           name: Build

exchanges/graphcache/cypress.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "video": false,

     

       3
       3
       +
         "component": {

     

       4
       4
       +
           "componentFolder": ".",

     

       5
       5
       +
           "testFiles": "**/e2e-tests/*spec.tsx"

     

       6
       6
       +
         }

     

       7
       7
       +
       }

exchanges/graphcache/cypress/fixtures/example.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "name": "Using fixtures to represent data",

     

       3
       3
       +
         "email": "hello@cypress.io",

     

       4
       4
       +
         "body": "Fixtures are a great way to mock data for responses to routes"

     

       5
       5
       +
       }

+15

exchanges/graphcache/cypress/plugins/index.js

···

       1
       1
       +
       // eslint-disable-next-line

     

       2
       2
       +
       const { startDevServer } = require('@cypress/vite-dev-server');

     

       3
       3
       +
       // eslint-disable-next-line

     

       4
       4
       +
       const path = require('path');

     

       5
       5
       +
       

     

       6
       6
       +
       /**

     

       7
       7
       +
        * @type {Cypress.PluginConfig}

     

       8
       8
       +
        */

     

       9
       9
       +
       module.exports = (on, _config) => {

     

       10
       10
       +
         on('dev-server:start', options =>

     

       11
       11
       +
           startDevServer({

     

       12
       12
       +
             options,

     

       13
       13
       +
           })

     

       14
       14
       +
         );

     

       15
       15
       +
       };

+25

exchanges/graphcache/cypress/support/commands.js

···

       1
       1
       +
       // ***********************************************

     

       2
       2
       +
       // This example commands.js shows you how to

     

       3
       3
       +
       // create various custom commands and overwrite

     

       4
       4
       +
       // existing commands.

     

       5
       5
       +
       //

     

       6
       6
       +
       // For more comprehensive examples of custom

     

       7
       7
       +
       // commands please read more here:

     

       8
       8
       +
       // https://on.cypress.io/custom-commands

     

       9
       9
       +
       // ***********************************************

     

       10
       10
       +
       //

     

       11
       11
       +
       //

     

       12
       12
       +
       // -- This is a parent command --

     

       13
       13
       +
       // Cypress.Commands.add('login', (email, password) => { ... })

     

       14
       14
       +
       //

     

       15
       15
       +
       //

     

       16
       16
       +
       // -- This is a child command --

     

       17
       17
       +
       // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })

     

       18
       18
       +
       //

     

       19
       19
       +
       //

     

       20
       20
       +
       // -- This is a dual command --

     

       21
       21
       +
       // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })

     

       22
       22
       +
       //

     

       23
       23
       +
       //

     

       24
       24
       +
       // -- This will overwrite an existing command --

     

       25
       25
       +
       // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

+20

exchanges/graphcache/cypress/support/index.js

···

       1
       1
       +
       // ***********************************************************

     

       2
       2
       +
       // This example support/index.js is processed and

     

       3
       3
       +
       // loaded automatically before your test files.

     

       4
       4
       +
       //

     

       5
       5
       +
       // This is a great place to put global configuration and

     

       6
       6
       +
       // behavior that modifies Cypress.

     

       7
       7
       +
       //

     

       8
       8
       +
       // You can change the location of this file or turn off

     

       9
       9
       +
       // automatically serving support files with the

     

       10
       10
       +
       // 'supportFile' configuration option.

     

       11
       11
       +
       //

     

       12
       12
       +
       // You can read more here:

     

       13
       13
       +
       // https://on.cypress.io/configuration

     

       14
       14
       +
       // ***********************************************************

     

       15
       15
       +
       

     

       16
       16
       +
       // Import commands.js using ES2015 syntax:

     

       17
       17
       +
       import './commands';

     

       18
       18
       +
       

     

       19
       19
       +
       // Alternatively you can use CommonJS syntax:

     

       20
       20
       +
       // require('./commands')

+128

exchanges/graphcache/e2e-tests/updates.spec.tsx

···

       1
       1
       +
       /// <reference types="cypress" />

     

       2
       2
       +
       

     

       3
       3
       +
       import * as React from 'react';

     

       4
       4
       +
       import { mount } from '@cypress/react';

     

       5
       5
       +
       import {

     

       6
       6
       +
         Provider,

     

       7
       7
       +
         createClient,

     

       8
       8
       +
         gql,

     

       9
       9
       +
         useQuery,

     

       10
       10
       +
         useMutation,

     

       11
       11
       +
         dedupExchange,

     

       12
       12
       +
         debugExchange,

     

       13
       13
       +
       } from 'urql';

     

       14
       14
       +
       import { executeExchange } from '@urql/exchange-execute';

     

       15
       15
       +
       import { buildSchema } from 'graphql';

     

       16
       16
       +
       

     

       17
       17
       +
       import { cacheExchange } from '../src';

     

       18
       18
       +
       

     

       19
       19
       +
       const schema = buildSchema(`

     

       20
       20
       +
         type Todo {

     

       21
       21
       +
           id: ID!

     

       22
       22
       +
           text: String!

     

       23
       23
       +
         }

     

       24
       24
       +
       

     

       25
       25
       +
         type Query {

     

       26
       26
       +
           todos: [Todo]!

     

       27
       27
       +
         }

     

       28
       28
       +
       

     

       29
       29
       +
         type Mutation {

     

       30
       30
       +
           updateTodo(id: ID! text: String!): Todo!

     

       31
       31
       +
         }

     

       32
       32
       +
       `);

     

       33
       33
       +
       

     

       34
       34
       +
       const todos: Array<{ id: string; text: string }> = [

     

       35
       35
       +
         { id: '1', text: 'testing urql' },

     

       36
       36
       +
       ];

     

       37
       37
       +
       

     

       38
       38
       +
       const rootValue = {

     

       39
       39
       +
         todos: () => {

     

       40
       40
       +
           return todos;

     

       41
       41
       +
         },

     

       42
       42
       +
         updateTodo: args => {

     

       43
       43
       +
           const todo = todos.find(x => x.id === args.id);

     

       44
       44
       +
           if (!todo) throw new Error("Can't find todo!");

     

       45
       45
       +
           todo.text = args.text;

     

       46
       46
       +
           return todo;

     

       47
       47
       +
         },

     

       48
       48
       +
       };

     

       49
       49
       +
       

     

       50
       50
       +
       describe('Graphcache updates', () => {

     

       51
       51
       +
         let client;

     

       52
       52
       +
         beforeEach(() => {

     

       53
       53
       +
           client = createClient({

     

       54
       54
       +
             url: 'https://trygql.formidable.dev/graphql/basic-pokedex',

     

       55
       55
       +
             exchanges: [

     

       56
       56
       +
               dedupExchange,

     

       57
       57
       +
               cacheExchange({}),

     

       58
       58
       +
               debugExchange,

     

       59
       59
       +
               executeExchange({ schema, rootValue }),

     

       60
       60
       +
             ],

     

       61
       61
       +
           });

     

       62
       62
       +
         });

     

       63
       63
       +
       

     

       64
       64
       +
         const TodosQuery = gql`

     

       65
       65
       +
           query {

     

       66
       66
       +
             todos {

     

       67
       67
       +
               id

     

       68
       68
       +
               text

     

       69
       69
       +
             }

     

       70
       70
       +
           }

     

       71
       71
       +
         `;

     

       72
       72
       +
       

     

       73
       73
       +
         const UpdateMutation = gql`

     

       74
       74
       +
           mutation($id: ID!, $text: String!) {

     

       75
       75
       +
             updateTodo(id: $id, text: $text) {

     

       76
       76
       +
               id

     

       77
       77
       +
               text

     

       78
       78
       +
             }

     

       79
       79
       +
           }

     

       80
       80
       +
         `;

     

       81
       81
       +
       

     

       82
       82
       +
         it('Can automatically update entities who have been queried', () => {

     

       83
       83
       +
           const Todos = () => {

     

       84
       84
       +
             const [result] = useQuery({ query: TodosQuery });

     

       85
       85
       +
             const [, update] = useMutation(UpdateMutation);

     

       86
       86
       +
       

     

       87
       87
       +
             if (result.fetching) return <p>Loading...</p>;

     

       88
       88
       +
       

     

       89
       89
       +
             return (

     

       90
       90
       +
               <main>

     

       91
       91
       +
                 <ul id="todos-list">

     

       92
       92
       +
                   {result.data.todos.map(todo => (

     

       93
       93
       +
                     <li key={todo.id}>

     

       94
       94
       +
                       {todo.text}

     

       95
       95
       +
                       <button

     

       96
       96
       +
                         id={`update-${todo.id}`}

     

       97
       97
       +
                         onClick={() => {

     

       98
       98
       +
                           update({ id: todo.id, text: todo.text + '_foo' });

     

       99
       99
       +
                         }}

     

       100
       100
       +
                       >

     

       101
       101
       +
                         Update {todo.id}

     

       102
       102
       +
                       </button>

     

       103
       103
       +
                     </li>

     

       104
       104
       +
                   ))}

     

       105
       105
       +
                 </ul>

     

       106
       106
       +
               </main>

     

       107
       107
       +
             );

     

       108
       108
       +
           };

     

       109
       109
       +
       

     

       110
       110
       +
           mount(

     

       111
       111
       +
             <Provider value={client}>

     

       112
       112
       +
               <Todos />

     

       113
       113
       +
             </Provider>

     

       114
       114
       +
           );

     

       115
       115
       +
       

     

       116
       116
       +
           const target = { ...todos[0] };

     

       117
       117
       +
           cy.get('#todos-list > li').then(items => {

     

       118
       118
       +
             expect(items.length).to.equal(todos.length);

     

       119
       119
       +
           });

     

       120
       120
       +
           cy.get('#update-' + target.id).click();

     

       121
       121
       +
       

     

       122
       122
       +
           cy.wait(500);

     

       123
       123
       +
           cy.get('#todos-list > li').then(items => {

     

       124
       124
       +
             expect(items.length).to.equal(todos.length);

     

       125
       125
       +
             expect(items[0].innerText).to.contain(target.text + '_foo');

     

       126
       126
       +
           });

     

       127
       127
       +
         });

     

       128
       128
       +
       });