https://github.com/mxstbr/urql-exchange-schema
Hey Berlin! This is new
https://github.com/mxstbr/urql-exchange-schema
graphql urql wonka
Last synced: about 1 year ago
JSON representation
Hey Berlin! This is new
- Host: GitHub
- URL: https://github.com/mxstbr/urql-exchange-schema
- Owner: mxstbr
- Created: 2019-07-16T10:07:24.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-02-20T09:40:52.000Z (over 6 years ago)
- Last Synced: 2025-04-20T07:59:58.791Z (over 1 year ago)
- Topics: graphql, urql, wonka
- Language: TypeScript
- Homepage:
- Size: 101 KB
- Stars: 32
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# `urql-exchange-schema`
Fetch data from a local GraphQL schema with [urql](https://github.com/FormidableLabs/urql). Useful for testing apps using urql.
```
npm install urql-exchange-schema
```
## Usage
```JS
import { createClient } from 'urql';
import { schemaExchange } from 'urql-exchange-schema';
const client = createClient({
url: '', // note that this will not be used, but is required by createClient so just pass anything into here
exchanges: [schemaExchange(schema)]
});
```
This is useful for testing your apps using urql. Instead of mocking `window.fetch`, you can mock your entire GraphQL schema and get sensible responses for any query with `graphql-tools`!
```JS
import { Provider, createClient } from 'urql';
import { schemaExchange } from 'urql-exchange-schema';
import { makeExecutableSchema, addMockFunctionsToSchema } from "graphql-tools";
// Create your schema and add mock functions to it
const schema = makeExecutableSchema({ typeDefs: yourTypeDefs });
addMockFunctionsToSchema({
schema,
mocks: yourMockFunctions,
});
// Pass the mock schema to the schemaExchange
const client = createClient({
url: '',
exchanges: [schemaExchange(schema)]
});
// Now you can test all your components that fetch data!
it('should fetch some data', () => {
const bla = render(
)
})
```
## Contributing
This package uses [tsdx](https://github.com/palmerhq/tsdx) for development. Below is a list of commands you will probably find useful.
- `npm run dev`: Runs the project in development/watch mode.
- `npm run build`: Bundles the package to the `dist` folder.
- `npm run test`: Runs tests.