14 |
15 | Home
16 |
17 |
18 |
21 | );
22 | };
23 |
24 | Home.getInitialProps = () => {
25 | return {
26 | title: 'Pokédex',
27 | };
28 | };
29 |
30 | export default Home;
31 |
--------------------------------------------------------------------------------
/examples/3-with-custom-exchange/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "paths": {
5 | "next-urql": ["../../"]
6 | },
7 | "target": "es5",
8 | "lib": ["dom", "dom.iterable", "esnext"],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": false,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "esModuleInterop": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "jsx": "preserve"
20 | },
21 | "exclude": ["node_modules"],
22 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
23 | }
24 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: '@typescript-eslint/parser',
3 | extends: [
4 | 'plugin:@typescript-eslint/recommended',
5 | 'plugin:react/recommended',
6 | 'plugin:prettier/recommended',
7 | ],
8 | parserOptions: {
9 | ecmaVersion: 2018,
10 | sourceType: 'module',
11 | },
12 | plugins: ['react-hooks'],
13 | rules: {
14 | '@typescript-eslint/no-explicit-any': 'off',
15 | '@typescript-eslint/explicit-function-return-type': 'off',
16 | 'react/prop-types': 'off',
17 | 'react-hooks/rules-of-hooks': 'error',
18 | 'react-hooks/exhaustive-deps': 'warn',
19 | },
20 | settings: {
21 | react: {
22 | version: 'detect',
23 | },
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/examples/2-with-_app.js/next.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | webpack(config) {
5 | config.resolve.alias.react = path.resolve(
6 | __dirname,
7 | '../../node_modules/react/',
8 | );
9 | config.resolve.alias['react-dom'] = path.resolve(
10 | __dirname,
11 | '../../node_modules/react-dom/',
12 | );
13 | config.resolve.alias['react-is'] = path.resolve(
14 | __dirname,
15 | '../../node_modules/react-is/',
16 | );
17 | config.resolve.alias.urql = path.resolve(
18 | __dirname,
19 | '../../node_modules/urql/',
20 | );
21 | config.resolve.alias['next-urql'] = path.resolve(__dirname, '../../');
22 | return config;
23 | },
24 | };
25 |
--------------------------------------------------------------------------------
/examples/1-with-urql-client/next.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | webpack(config) {
5 | config.resolve.alias.react = path.resolve(
6 | __dirname,
7 | '../../node_modules/react/',
8 | );
9 | config.resolve.alias['react-dom'] = path.resolve(
10 | __dirname,
11 | '../../node_modules/react-dom/',
12 | );
13 | config.resolve.alias['react-is'] = path.resolve(
14 | __dirname,
15 | '../../node_modules/react-is/',
16 | );
17 | config.resolve.alias.urql = path.resolve(
18 | __dirname,
19 | '../../node_modules/urql/',
20 | );
21 | config.resolve.alias['next-urql'] = path.resolve(__dirname, '../../');
22 | return config;
23 | },
24 | };
25 |
--------------------------------------------------------------------------------
/examples/3-with-custom-exchange/next.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | webpack(config) {
5 | config.resolve.alias.react = path.resolve(
6 | __dirname,
7 | '../../node_modules/react/',
8 | );
9 | config.resolve.alias['react-dom'] = path.resolve(
10 | __dirname,
11 | '../../node_modules/react-dom/',
12 | );
13 | config.resolve.alias['react-is'] = path.resolve(
14 | __dirname,
15 | '../../node_modules/react-is/',
16 | );
17 | config.resolve.alias.urql = path.resolve(
18 | __dirname,
19 | '../../node_modules/urql/',
20 | );
21 | config.resolve.alias['next-urql'] = path.resolve(__dirname, '../../');
22 | return config;
23 | },
24 | };
25 |
--------------------------------------------------------------------------------
/examples/2-with-_app.js/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withUrqlClient, NextUrqlAppContext } from 'next-urql';
3 | import NextApp, { AppProps } from 'next/app';
4 |
5 | const App = ({ Component, pageProps }: AppProps) => {
6 | return {title}
19 |
12 |
13 | Home
14 |
15 |
16 |
17 |
19 | );
20 |
21 | export default withUrqlClient(
22 | { url: 'https://graphql-pokemon.now.sh' },
23 | (ssrExchange: SSRExchange) => [
24 | dedupExchange,
25 | urlExchange,
26 | cacheExchange,
27 | ssrExchange,
28 | fetchExchange,
29 | ],
30 | )(Home);
31 |
--------------------------------------------------------------------------------
/examples/1-with-urql-client/README.md:
--------------------------------------------------------------------------------
1 | ## `next-urql` – Page Component Example
2 |
3 | This example is a small reference of how to integrate `next-urql` with your NextJS application by wrapping a Page component. The project is a small Pokedex querying the excellent [Pokemon GraphQL API](https://github.com/lucasbento/graphql-pokemon).
4 |
5 | See this example on [CodeSandbox](https://codesandbox.io/s/next-urql-pokedex-oqj3x).
6 |
7 | ### Installation
8 |
9 | To get the example project running, follow these two steps:
10 |
11 | ```sh
12 | yarn
13 | yarn start
14 | ```
15 |
16 | The example project should spin up at `http://localhost:3000`. `yarn start` will always run the build of the `next-urql` source, so you should see changes picked up once the dev server boots up. However, if you make changes to the `next-urql` source while the dev server is running, you'll need to run `yarn start` again to see those changes take effect.
17 |
--------------------------------------------------------------------------------
/examples/1-with-urql-client/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NextComponentType } from 'next';
3 | import Head from 'next/head';
4 | import { withUrqlClient, NextUrqlPageContext } from 'next-urql';
5 | import PokémonList from '../components/pokemon_list';
6 |
7 | interface InitialProps {
8 | title: string;
9 | }
10 |
11 | const Home: NextComponentType<
12 | NextUrqlPageContext,
13 | InitialProps,
14 | InitialProps
15 | > = ({ title }) => (
16 |
17 |
18 | Home
19 |
20 |
21 |
24 | );
25 |
26 | Home.getInitialProps = () => {
27 | return {
28 | title: 'Pokédex',
29 | };
30 | };
31 |
32 | export default withUrqlClient((ctx: NextUrqlPageContext) => {
33 | return {
34 | url: 'https://graphql-pokemon.now.sh',
35 | fetchOptions: {
36 | headers: {
37 | Authorization: `Bearer ${ctx?.req?.headers?.authorization ?? ''}`,
38 | },
39 | },
40 | };
41 | })(Home);
42 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | import { NextPageContext } from 'next';
2 | import { ClientOptions, Exchange, Client } from 'urql';
3 | import { SSRExchange, SSRData } from 'urql/dist/types/exchanges/ssr';
4 | import { AppContext } from 'next/app';
5 |
6 | export type NextUrqlClientOptions = Omit<
7 | ClientOptions,
8 | 'exchanges' | 'suspense'
9 | >;
10 |
11 | export type NextUrqlClientConfig =
12 | | NextUrqlClientOptions
13 | | ((ctx?: NextPageContext) => NextUrqlClientOptions);
14 |
15 | export type MergeExchanges = (ssrExchange: SSRExchange) => Exchange[];
16 |
17 | export interface NextUrqlPageContext extends NextPageContext {
18 | urqlClient: Client;
19 | }
20 |
21 | export interface NextUrqlAppContext extends AppContext {
22 | urqlClient: Client;
23 | }
24 |
25 | export type NextUrqlContext = NextUrqlPageContext | NextUrqlAppContext;
26 |
27 | export interface WithUrqlState {
28 | urqlState?: SSRData;
29 | }
30 |
31 | export interface WithUrqlClient {
32 | urqlClient: Client;
33 | }
34 |
35 | export interface WithUrqlProps extends WithUrqlClient, WithUrqlState {
36 | [key: string]: any;
37 | }
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Formidable
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/src/init-urql-client.ts:
--------------------------------------------------------------------------------
1 | import {
2 | createClient,
3 | dedupExchange,
4 | cacheExchange,
5 | fetchExchange,
6 | ssrExchange,
7 | Client,
8 | Exchange,
9 | } from 'urql';
10 | import { SSRData, SSRExchange } from 'urql/dist/types/exchanges/ssr';
11 | import 'isomorphic-unfetch';
12 |
13 | import { NextUrqlClientOptions } from './types';
14 |
15 | let urqlClient: Client | null = null;
16 | let ssrCache: SSRExchange | null = null;
17 |
18 | export function initUrqlClient(
19 | clientOptions: NextUrqlClientOptions,
20 | mergeExchanges: (ssrEx: SSRExchange) => Exchange[] = ssrEx => [
21 | dedupExchange,
22 | cacheExchange,
23 | ssrEx,
24 | fetchExchange,
25 | ],
26 | initialState?: SSRData,
27 | ): [Client | null, SSRExchange | null] {
28 | // Create a new Client for every server-side rendered request.
29 | // This ensures we reset the state for each rendered page.
30 | // If there is an exising client instance on the client-side, use it.
31 | const isServer = typeof window === 'undefined';
32 | if (isServer || !urqlClient) {
33 | ssrCache = ssrExchange({ initialState });
34 |
35 | urqlClient = createClient({
36 | ...clientOptions,
37 | suspense: isServer,
38 | exchanges: mergeExchanges(ssrCache),
39 | });
40 | }
41 |
42 | // Return both the Client instance and the ssrCache.
43 | return [urqlClient, ssrCache];
44 | }
45 |
--------------------------------------------------------------------------------
/__tests__/init-urql-client.spec.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ssrExchange,
3 | debugExchange,
4 | dedupExchange,
5 | cacheExchange,
6 | fetchExchange,
7 | } from 'urql';
8 |
9 | import { initUrqlClient } from '../src/init-urql-client';
10 | import { SSRData } from 'urql/dist/types/exchanges/ssr';
11 |
12 | describe('initUrqlClient', () => {
13 | it('should return the urqlClient instance and ssrCache', () => {
14 | const [urqlClient, ssrCache] = initUrqlClient({
15 | url: 'http://localhost:3000',
16 | });
17 |
18 | expect(urqlClient).toHaveProperty('url', 'http://localhost:3000');
19 | expect(urqlClient).toHaveProperty('suspense', true);
20 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
21 | expect(ssrCache!.toString()).toEqual(ssrExchange().toString());
22 | });
23 |
24 | it('should accept an optional mergeExchanges function to allow for exchange composition', () => {
25 | const [urqlClient, ssrCache] = initUrqlClient(
26 | {
27 | url: 'http://localhost:3000',
28 | },
29 | ssrEx => [
30 | debugExchange,
31 | dedupExchange,
32 | cacheExchange,
33 | ssrEx,
34 | fetchExchange,
35 | ],
36 | );
37 |
38 | expect(urqlClient).toHaveProperty('url', 'http://localhost:3000');
39 | expect(urqlClient).toHaveProperty('suspense', true);
40 | // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
41 | expect(ssrCache!.toString()).toEqual(ssrExchange().toString());
42 | });
43 |
44 | it('should accept some initial state to populate the cache', () => {
45 | const initialState: SSRData = {
46 | 123: { data: { name: 'Kadabra', type: 'Psychic' } },
47 | 456: { data: { name: 'Butterfree', type: ['Psychic', 'Bug'] } },
48 | };
49 |
50 | const [urqlClient, ssrCache] = initUrqlClient(
51 | {
52 | url: 'http://localhost:3000',
53 | },
54 | undefined,
55 | initialState,
56 | );
57 |
58 | expect(urqlClient).toHaveProperty('url', 'http://localhost:3000');
59 | expect(urqlClient).toHaveProperty('suspense', true);
60 |
61 | const data = ssrCache && ssrCache.extractData();
62 | expect(data).toEqual(initialState);
63 | });
64 | });
65 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "next-urql",
3 | "version": "0.3.0",
4 | "description": "Convenience wrappers for using urql with NextJS.",
5 | "repository": "https://www.github.com/FormidableLabs/next-urql",
6 | "bugs": {
7 | "url": "https://github.com/FormidableLabs/next-urql/issues"
8 | },
9 | "main": "dist/next-urql.js",
10 | "module": "dist/next-urql.es.js",
11 | "source": "src/index.ts",
12 | "types": "dist/types/index.d.ts",
13 | "author": "Formidable",
14 | "license": "MIT",
15 | "scripts": {
16 | "build": "rollup -c rollup.config.js",
17 | "check:ci": "run-s check:types lint format test",
18 | "check:format": "prettier --check {src,__tests__,examples}/*.{ts,tsx,d.ts,js}",
19 | "check:types": "tsc --noEmit",
20 | "clean": "rimraf ./dist ./node_modules/.cache",
21 | "format": "prettier --write {src,__tests__,examples}/*.{ts,tsx,d.ts,js}",
22 | "lint": "eslint src/**/*.{ts,tsx}",
23 | "preversion": "run-s clean test build",
24 | "test": "jest"
25 | },
26 | "devDependencies": {
27 | "@babel/core": "^7.6.4",
28 | "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
29 | "@babel/plugin-transform-object-assign": "^7.8.3",
30 | "@babel/preset-env": "^7.6.3",
31 | "@babel/preset-typescript": "^7.6.0",
32 | "@rollup/plugin-buble": "^0.21.1",
33 | "@rollup/plugin-commonjs": "^11.0.2",
34 | "@rollup/plugin-node-resolve": "^7.1.0",
35 | "@rollup/plugin-replace": "^2.3.1",
36 | "@types/enzyme": "^3.10.3",
37 | "@types/enzyme-adapter-react-16": "^1.0.5",
38 | "@types/jest": "^24.0.19",
39 | "@types/node-fetch": "^2.5.4",
40 | "@types/react": "^16.9.6",
41 | "@types/react-dom": "^16.9.2",
42 | "@typescript-eslint/eslint-plugin": "^2.4.0",
43 | "@typescript-eslint/parser": "^2.4.0",
44 | "babel-plugin-transform-async-to-promises": "^0.8.15",
45 | "enzyme": "^3.10.0",
46 | "enzyme-adapter-react-16": "^1.15.1",
47 | "eslint": "^6.5.1",
48 | "eslint-config-prettier": "^6.4.0",
49 | "eslint-plugin-prettier": "^3.1.1",
50 | "eslint-plugin-react": "^7.16.0",
51 | "eslint-plugin-react-hooks": "^2.3.0",
52 | "graphql": "^14.5.8",
53 | "graphql-tag": "^2.10.1",
54 | "isomorphic-unfetch": "^3.0.0",
55 | "jest": "^24.9.0",
56 | "next": "^9.2.1",
57 | "npm-run-all": "^4.1.5",
58 | "prettier": "^1.18.2",
59 | "react": "^16.8.6",
60 | "react-dom": "^16.8.6",
61 | "react-is": "^16.10.2",
62 | "rimraf": "^3.0.0",
63 | "rollup": "^1.25.0",
64 | "rollup-plugin-babel": "^4.3.3",
65 | "rollup-plugin-terser": "^5.1.2",
66 | "rollup-plugin-typescript2": "^0.24.3",
67 | "styled-components": "^4.4.0",
68 | "terser": "^4.3.9",
69 | "ts-jest": "^25.2.0",
70 | "tslib": "^1.10.0",
71 | "typescript": "^3.6.4",
72 | "urql": "^1.6.1"
73 | },
74 | "dependencies": {
75 | "react-ssr-prepass": "^1.1.2"
76 | },
77 | "peerDependencies": {
78 | "isomorphic-unfetch": "^3.0.0",
79 | "react": "^16.8.6",
80 | "react-dom": "^16.8.6",
81 | "react-is": "^16.8.6",
82 | "urql": "^1.1.0"
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/src/with-urql-client.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NextPage, NextPageContext } from 'next';
3 | import NextApp, { AppContext } from 'next/app';
4 | import ssrPrepass from 'react-ssr-prepass';
5 | import { Provider, dedupExchange, cacheExchange, fetchExchange } from 'urql';
6 |
7 | import { initUrqlClient } from './init-urql-client';
8 | import {
9 | NextUrqlClientConfig,
10 | MergeExchanges,
11 | NextUrqlContext,
12 | WithUrqlProps,
13 | } from './types';
14 |
15 | function getDisplayName(Component: React.ComponentType{title}
22 |
78 | {result.data.pokemons.map(pokémon => (
79 |
102 |
139 |
140 | );
141 | };
142 |
143 | export default PokémonList;
144 |
--------------------------------------------------------------------------------
/examples/1-with-urql-client/components/pokemon_list.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import gql from 'graphql-tag';
3 | import { useQuery } from 'urql';
4 |
5 | const typesToIcon = new Map([
6 | ['Bug', '/types/Bug@2x.png'],
7 | ['Dark', '/types/Dark@2x.png'],
8 | ['Dragon', '/types/Dragon@2x.png'],
9 | ['Electric', '/types/Electric@2x.png'],
10 | ['Fairy', '/types/Fairy@2x.png'],
11 | ['Fighting', '/types/Fight@2x.png'],
12 | ['Fire', '/types/Fire@2x.png'],
13 | ['Ghost', '/types/Ghost@2x.png'],
14 | ['Grass', '/types/Grass@2x.png'],
15 | ['Ground', '/types/Ground@2x.png'],
16 | ['Ice', '/types/Ice@2x.png'],
17 | ['Normal', '/types/Normal@2x.png'],
18 | ['Poison', '/types/Poison@2x.png'],
19 | ['Psychic', '/types/Psychic@2x.png'],
20 | ['Rock', '/types/Rock@2x.png'],
21 | ['Steel', '/types/Steel@2x.png'],
22 | ['Water', '/types/Water@2x.png'],
23 | ]);
24 |
25 | const queryPokémon = gql`
26 | query pokemon($first: Int!) {
27 | pokemons(first: $first) {
28 | id
29 | name
30 | types
31 | resistant
32 | weaknesses
33 | image
34 | evolutions {
35 | name
36 | }
37 | }
38 | }
39 | `;
40 |
41 | interface PokémonData {
42 | pokemons: Pokémon[];
43 | }
44 |
45 | interface PokémonVariables {
46 | first: number;
47 | }
48 |
49 | interface Pokémon {
50 | id: string;
51 | name: string;
52 | types: string[];
53 | resistant: string[];
54 | weaknesses: string[];
55 | image: string;
56 | evolutions: {
57 | name: string;
58 | };
59 | }
60 |
61 | const PokémonList: React.FC = () => {
62 | const [result] = useQuery
80 | 
81 |
100 | ))}
101 |
82 |
99 | {pokémon.name}
83 |
84 | {pokémon.types
85 | .filter(type => typesToIcon.has(type))
86 | .map(type => (
87 |
98 |
88 | })
92 |
93 | {type}
94 |
95 |
96 | ))}
97 |
78 | {result.data.pokemons.map(pokémon => (
79 |
102 |
139 |
140 | );
141 | };
142 |
143 | export default PokémonList;
144 |
--------------------------------------------------------------------------------
/examples/3-with-custom-exchange/components/pokemon_list.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import gql from 'graphql-tag';
3 | import { useQuery } from 'urql';
4 |
5 | const typesToIcon = new Map([
6 | ['Bug', '/types/Bug@2x.png'],
7 | ['Dark', '/types/Dark@2x.png'],
8 | ['Dragon', '/types/Dragon@2x.png'],
9 | ['Electric', '/types/Electric@2x.png'],
10 | ['Fairy', '/types/Fairy@2x.png'],
11 | ['Fighting', '/types/Fight@2x.png'],
12 | ['Fire', '/types/Fire@2x.png'],
13 | ['Ghost', '/types/Ghost@2x.png'],
14 | ['Grass', '/types/Grass@2x.png'],
15 | ['Ground', '/types/Ground@2x.png'],
16 | ['Ice', '/types/Ice@2x.png'],
17 | ['Normal', '/types/Normal@2x.png'],
18 | ['Poison', '/types/Poison@2x.png'],
19 | ['Psychic', '/types/Psychic@2x.png'],
20 | ['Rock', '/types/Rock@2x.png'],
21 | ['Steel', '/types/Steel@2x.png'],
22 | ['Water', '/types/Water@2x.png'],
23 | ]);
24 |
25 | const queryPokémon = gql`
26 | query pokemon($first: Int!) {
27 | pokemons(first: $first) {
28 | id
29 | name
30 | types
31 | resistant
32 | weaknesses
33 | image
34 | evolutions {
35 | name
36 | }
37 | }
38 | }
39 | `;
40 |
41 | interface PokémonData {
42 | pokemons: Pokémon[];
43 | }
44 |
45 | interface PokémonVariables {
46 | first: number;
47 | }
48 |
49 | interface Pokémon {
50 | id: string;
51 | name: string;
52 | types: string[];
53 | resistant: string[];
54 | weaknesses: string[];
55 | image: string;
56 | evolutions: {
57 | name: string;
58 | };
59 | }
60 |
61 | const PokémonList: React.FC = () => {
62 | const [result] = useQuery
80 |
81 |
100 | ))}
101 |
82 |
99 | {pokémon.name}
83 |
84 | {pokémon.types
85 | .filter(type => typesToIcon.has(type))
86 | .map(type => (
87 |
98 |
88 |
92 |
93 | {type}
94 |
95 |
96 | ))}
97 |
78 | {result.data.pokemons.map(pokémon => (
79 |
102 |
139 |
140 | );
141 | };
142 |
143 | export default PokémonList;
144 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/camelcase */
2 | import commonjs from '@rollup/plugin-commonjs';
3 | import resolve from '@rollup/plugin-node-resolve';
4 | import babel from 'rollup-plugin-babel';
5 | import typescript from 'rollup-plugin-typescript2';
6 | import { terser } from 'rollup-plugin-terser';
7 | import replace from '@rollup/plugin-replace';
8 | import buble from '@rollup/plugin-buble';
9 |
10 | import pkg from './package.json';
11 |
12 | const extensions = ['.js', '.jsx', '.ts', '.tsx'];
13 |
14 | const external = [];
15 |
16 | if (pkg.peerDependencies) {
17 | external.push(...Object.keys(pkg.peerDependencies));
18 | }
19 |
20 | if (pkg.dependencies) {
21 | external.push(...Object.keys(pkg.dependencies));
22 | }
23 |
24 | const terserPretty = terser({
25 | warnings: true,
26 | ecma: 5,
27 | keep_fnames: true,
28 | compress: {
29 | conditionals: false,
30 | if_return: false,
31 | join_vars: false,
32 | keep_fnames: true,
33 | loops: false,
34 | pure_getters: true,
35 | toplevel: true,
36 | sequences: false,
37 | },
38 | mangle: false,
39 | output: {
40 | braces: true,
41 | indent_level: 2,
42 | },
43 | });
44 |
45 | const terserMinified = terser({
46 | warnings: true,
47 | ecma: 5,
48 | toplevel: true,
49 | compress: {
50 | keep_infinity: true,
51 | passes: 10,
52 | pure_getters: true,
53 | },
54 | });
55 |
56 | const makePlugins = isProduction =>
57 | [
58 | resolve({
59 | mainFields: ['module', 'jsnext', 'main'],
60 | browser: true,
61 | }),
62 | commonjs({
63 | ignoreGlobal: true,
64 | include: /\/node_modules\//,
65 | namedExports: {
66 | // eslint-disable-next-line @typescript-eslint/no-var-requires
67 | react: Object.keys(require('react')),
68 | },
69 | }),
70 | typescript({
71 | typescript: require('typescript'),
72 | cacheRoot: './node_modules/.cache/.rts2_cache',
73 | useTsconfigDeclarationDir: true,
74 | tsconfigDefaults: {
75 | compilerOptions: {
76 | sourceMap: true,
77 | },
78 | },
79 | tsconfigOverride: {
80 | compilerOptions: {
81 | declaration: !isProduction,
82 | declarationDir: './dist/types',
83 | target: 'es6',
84 | },
85 | include: ['src/**/*'],
86 | exclude: ['__tests__/**/*'],
87 | },
88 | }),
89 | buble({
90 | transforms: {
91 | unicodeRegExp: false,
92 | dangerousForOf: true,
93 | dangerousTaggedTemplateString: true,
94 | generator: false,
95 | },
96 | objectAssign: 'Object.assign',
97 | exclude: 'node_modules/**',
98 | }),
99 | babel({
100 | babelrc: false,
101 | extensions,
102 | include: ['src/**/*'],
103 | exclude: 'node_modules/**',
104 | plugins: [
105 | '@babel/plugin-transform-object-assign',
106 | [
107 | 'babel-plugin-transform-async-to-promises',
108 | {
109 | inlineHelpers: true,
110 | externalHelpers: true,
111 | },
112 | ],
113 | ],
114 | }),
115 | isProduction &&
116 | replace({
117 | 'process.env.NODE_ENV': JSON.stringify('production'),
118 | }),
119 | isProduction ? terserMinified : terserPretty,
120 | ].filter(Boolean);
121 |
122 | export default [
123 | {
124 | input: './src/index.ts',
125 | external,
126 | plugins: makePlugins(false),
127 | output: [
128 | {
129 | file: './dist/next-urql.js',
130 | format: 'cjs',
131 | },
132 | {
133 | file: './dist/next-urql.es.js',
134 | format: 'esm',
135 | },
136 | ],
137 | },
138 | {
139 | input: './src/index.ts',
140 | external,
141 | plugins: makePlugins(true),
142 | output: [
143 | {
144 | file: './dist/next-urql.min.js',
145 | format: 'cjs',
146 | },
147 | {
148 | file: './dist/next-urql.es.min.js',
149 | format: 'esm',
150 | },
151 | ],
152 | },
153 | ];
154 |
--------------------------------------------------------------------------------
/__tests__/with-urql-client.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, configure } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 | import { Client, defaultExchanges, composeExchanges } from 'urql';
5 |
6 | import { withUrqlClient, NextUrqlPageContext } from '../src';
7 | import * as init from '../src/init-urql-client';
8 |
9 | const MockApp: React.FC
80 |
81 |
100 | ))}
101 |
82 |
99 | {pokémon.name}
83 |
84 | {pokémon.types
85 | .filter(type => typesToIcon.has(type))
86 | .map(type => (
87 |
98 |
88 |
92 |
93 | {type}
94 |
95 |
96 | ))}
97 | 
9 | 
10 | 
13 | 
16 |
59 |
60 | Root
61 |
62 |
63 |
64 |
67 | );
68 |
69 | export default withUrqlClient({ url: 'https://graphql-pokemon.now.sh' })(Root);
70 | ```
71 |
72 | Read more below in the [API](#API) section to learn more about the arguments that can be passed to `withUrqlClient`.
73 |
74 | #### Integration with `_app.js`
75 |
76 | Next allows you to override the root of your application using a special page called [`_app.js`](https://nextjs.org/docs#custom-app). If you want to have all GraphQL requests in your application fetched on the server-side, you _could_ wrap the component exported by `_app.js` in `withUrqlClient`. However, be aware that this will opt you out of [automatic static optimization](https://nextjs.org/docs#automatic-static-optimization) for your entire application. In general, it's recommended practice to only use `withUrqlClient` on the pages that have GraphQL operations in their component tree. Read more in the [Caveats](#Caveats) section. Check out our example for using `next-urql` with `_app.js` [here](/examples/2-with-_app.js/README.md).
77 |
78 | ### API
79 |
80 | `next-urql` exposes a single higher order component, `withUrqlClient`. This HoC accepts two arguments:
81 |
82 | #### `clientOptions` (Required)
83 |
84 | The `clientOptions` argument is required. It represents all of the options you want to enable on your `urql` Client instance. It has the following union type:
85 |
86 | ```typescript
87 | type NextUrqlClientConfig =
88 | | Omit