├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── enzyme.setup.js
├── package.json
├── src
├── Query.js
├── index.js
└── utils.js
├── tests
├── Query.test.js
└── utils
│ ├── getFragmentName.test.js
│ ├── getFragmentsFromTree.test.js
│ ├── getQueryFragmentsFromTree.test.js
│ └── getRequestedFragmentNames.test.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-0", "react"],
3 | }
4 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | extends: ["taller/react"],
3 | globals: {
4 | jest: true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | temp
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | temp
3 | tests
4 | .babelrc
5 | .eslintrc
6 | .gitignore
7 | .travis.yml
8 | yarn.lock
9 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "stable"
4 | - "9"
5 | - "7"
6 | - "6"
7 | - "5"
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Lucas Constantino Silva
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.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Apollo Defragment
2 |
3 | Automatic query defragmentation based on React trees.
4 |
5 | [](https://travis-ci.org/lucasconstantino/react-apollo-defragment)
6 |
7 | :warning: **This is experimental software**, and though there are plenty of unit tests you should probably avoid using on production code
8 |
9 | ## Installation
10 |
11 | ```
12 | npm install react-apollo-defragment
13 | ```
14 |
15 | > react-apollo-defragment has peer dependency on [react](https://github.com/facebook/react), [react-apollo](https://github.com/apollographql/react-apollo), [graphql](https://github.com/graphql/graphql-js), and [prop-types](https://github.com/facebook/prop-types). Make sure to have them installed.
16 |
17 | ## Motivation
18 |
19 | When [using fragments](https://www.apollographql.com/docs/react/features/fragments.html) one thing that bothers me is that we lose some of the decoupling between child and parent components. When the fragment is used by a first-level child using fragment as we currently do is not a big problem; you are already declaring the use of the child component via importing it on the parent, after all. But when the fragment is used way below down the tree, it just becomes odd to have the querying component have so much logic on what fragments exactly - and many times sub-fragments - must be in use.
20 |
21 | There was already some [discussion on fragment composition](https://github.com/apollographql/react-apollo/issues/140), but the proposals did not went forward.
22 |
23 | What I needed was some way to decouple my components once more, and avoid having to define too many inner-queries to solve something that GraphQL should be used for: walking through a graph.
24 |
25 | ## How does it work
26 |
27 | This project exposes a substitute [Query component](https://github.com/apollographql/react-apollo/releases/tag/v2.1.0-beta.0) which traverses the underlying React element tree to find the fragments in use in the query. The components must expose fragments on the static property `fragment` for this to work.
28 |
29 | ## Usage
30 |
31 | The usage is the same as with react-apollo's `Query` component, only in this case no fragments must be imported and declared from the component:
32 |
33 | ```js
34 | import { Query } from 'react-apollo-defragment'
35 | import gql from 'graphql-tag'
36 |
37 | // PersonAvatar.js: a component using fragments.
38 |
39 | const PersonAvatar = ({ photo, name }) => (
40 |
41 |
42 |
{ name }
43 |
69 | { people.map(person => (
70 | -
71 |
72 |
73 | )) }
74 |
75 | )
76 | ) }
77 |
78 | )
79 | ```
80 |
81 | ## This package should be temporary
82 |
83 | I believe something similar to what is accomplished by this package should be soon implemented on the [React Apollo](https://github.com/apollographql/react-apollo) core. If someday that happens, this package will either be deprecated or hold other experimental functionality on the subject of GraphQL fragments with Apollo and React.
84 |
--------------------------------------------------------------------------------
/enzyme.setup.js:
--------------------------------------------------------------------------------
1 | import { configure } from 'enzyme'
2 | import Adapter from 'enzyme-adapter-react-16'
3 |
4 | configure({ adapter: new Adapter() })
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-apollo-defragment",
3 | "version": "0.1.0",
4 | "description": "Automatic query defragmentation based on React trees.",
5 | "main": "lib/index.js",
6 | "directories": {
7 | "test": "test"
8 | },
9 | "scripts": {
10 | "clean": "rm -Rf lib",
11 | "build": "npm run clean && babel src -d lib",
12 | "lint": "eslint src tests",
13 | "test": "jest",
14 | "prepush": "npm run lint && npm run test",
15 | "prepublish": "npm run lint && npm run test && npm run build"
16 | },
17 | "keywords": [
18 | "react",
19 | "apollo",
20 | "graphql",
21 | "fragment",
22 | "react-apollo"
23 | ],
24 | "author": "Lucas Constantino Silva ",
25 | "license": "MIT",
26 | "devDependencies": {
27 | "apollo-cache-inmemory": "^1.1.11",
28 | "apollo-client": "^2.2.7",
29 | "apollo-link-schema": "^1.0.6",
30 | "babel-cli": "^6.18.0",
31 | "babel-core": "^6.18.2",
32 | "babel-preset-react": "^6.24.1",
33 | "babel-preset-taller": "^0.1.1",
34 | "babel-register": "^6.18.0",
35 | "enzyme": "^3.3.0",
36 | "enzyme-adapter-react-16": "^1.1.1",
37 | "eslint": "^4.18.2",
38 | "eslint-config-taller": "^1.1.4",
39 | "eslint-plugin-import": "^2.9.0",
40 | "eslint-plugin-node": "^6.0.1",
41 | "eslint-plugin-standard": "^3.0.1",
42 | "graphql": "^0.13.2",
43 | "graphql-tag": "^2.8.0",
44 | "graphql-tools": "^2.23.1",
45 | "jest": "^19.0.2",
46 | "prop-types": "^15.6.1",
47 | "raf": "^3.4.0",
48 | "react": "^16.2.0",
49 | "react-apollo": "^2.1.0-beta.3",
50 | "react-dom": "^16.2.0"
51 | },
52 | "repository": {
53 | "type": "git",
54 | "url": "git+https://github.com/lucasconstantino/react-apollo-defragment.git"
55 | },
56 | "bugs": {
57 | "url": "https://github.com/lucasconstantino/react-apollo-defragment/issues"
58 | },
59 | "homepage": "https://github.com/lucasconstantino/react-apollo-defragment#readme",
60 | "jest": {
61 | "setupFiles": [
62 | "raf/polyfill",
63 | "/enzyme.setup.js"
64 | ],
65 | "moduleNameMapper": {
66 | "react-apollo-defragment": "/src"
67 | }
68 | },
69 | "dependencies": {
70 | "react-tree-walker": "^2.1.3"
71 | },
72 | "peerDependencies": {
73 | "graphql": "^0.13.2",
74 | "prop-types": "^15.6.1",
75 | "react": "^16.2.0",
76 | "react-apollo": "^2.1.0-beta.3"
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/Query.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { concatAST } from 'graphql'
4 | import { Query as ApolloQuery } from 'react-apollo'
5 |
6 | import { getQueryFragmentsFromTree } from './utils'
7 |
8 | const hold = func => () => {
9 | throw new Error(`Cannot execute \`${func}\` while extracting fragments`)
10 | }
11 |
12 | const temporaryResponse = {
13 | data: {},
14 | variables: {},
15 | refetch: hold('refetch'),
16 | fetchMore: hold('fetchMore'),
17 | updateQuery: hold('updateQuery'),
18 | startPolling: hold('startPolling'),
19 | stopPolling: hold('stopPolling'),
20 | subscribeToMore: hold('subscribeToMore'),
21 | loading: true,
22 | networkStatus: 1,
23 | error: undefined,
24 | defragmenting: true,
25 | }
26 |
27 | /**
28 | * Fragment extraction capable version of react-apollo's Query component.
29 | */
30 | class DefragmentedQuery extends React.PureComponent {
31 | static propTypes = {
32 | query: PropTypes.object, // AST propType?
33 | children: PropTypes.func,
34 | }
35 |
36 | static contextTypes = {
37 | defragmenting: PropTypes.bool,
38 | }
39 |
40 | static childContextTypes = {
41 | defragmenting: PropTypes.bool,
42 | }
43 |
44 | getChildContext () {
45 | return {
46 | defragmenting: !this.state.composedQuery || this.state.defragmenting
47 | }
48 | }
49 |
50 | constructor (...args) {
51 | super(...args)
52 |
53 | this.state = {
54 | composedQuery: null,
55 | defragmenting: false,
56 | }
57 | }
58 |
59 | componentDidMount () {
60 | this.__isMounted = true
61 | }
62 |
63 | componentWillUnmount () {
64 | this.__isMounted = false
65 | }
66 |
67 | defragment = tree => setTimeout(() => {
68 | if (this.__isMounted) {
69 | this.setState({
70 | defragmenting: true
71 | })
72 | }
73 |
74 | getQueryFragmentsFromTree(tree, this.props.query).then(async fragments => {
75 | // Only update if component is still mounted.
76 | if (this.__isMounted) {
77 | this.setState({
78 | defragmenting: false,
79 | composedQuery: fragments.length
80 | ? concatAST([
81 | this.props.query,
82 | ...fragments
83 | ])
84 | : this.props.query
85 | })
86 | }
87 | })
88 | })
89 |
90 | render () {
91 | const { children, ...props } = this.props
92 |
93 | if (!this.state.composedQuery) {
94 | const tree = children({ ...props, ...temporaryResponse })
95 |
96 | if (!this.state.defragmenting) {
97 | this.defragment(tree)
98 | }
99 |
100 | return tree
101 | }
102 |
103 | if (this.context.defragmenting) {
104 | return children({ ...props, ...temporaryResponse })
105 | }
106 |
107 | return (
108 |
109 | { results => children({ ...results, defragmenting: false }) }
110 |
111 | )
112 | }
113 | }
114 |
115 | export const Query = DefragmentedQuery
116 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export * from './utils'
2 | export * from './Query'
3 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | import walk from 'react-tree-walker'
2 | import { visit, BREAK } from 'graphql'
3 |
4 | /**
5 | * Asynchronously walk a React component tree to extract
6 | * any encountered fragments (via static properties on components).
7 | *
8 | * @param {Object} tree A React component tree.
9 | * @param {Function} dive Predicate function to decide if should dive deeper.
10 | * @param {Object} dive.fragment The extracted fragment.
11 | * @param dive[...] The walking parameters.
12 | *
13 | * @return {Array} extracted fragments.
14 | */
15 | export const getFragmentsFromTree = async (tree, dive = () => true) => {
16 | const fragments = []
17 |
18 | if (tree) {
19 | await walk(tree, (element, ...args) => {
20 | const fragment = element.type && element.type.fragment
21 | ? element.type.fragment
22 | : null
23 |
24 | const diving = dive(fragment, element, ...args)
25 |
26 | if (fragment && diving) fragments.push(fragment)
27 |
28 | return diving
29 | })
30 | }
31 |
32 | return fragments
33 | }
34 |
35 | /**
36 | * Given an AST, extract the first available fragment name.
37 | *
38 | * @param {Object} ast GraphQL AST.
39 | * @return {String} the found fragment name or null otherwise.
40 | */
41 | export const getFragmentName = ast => {
42 | let fragmentName = null
43 |
44 | visit(ast, {
45 | FragmentDefinition: ({ name: { value } }) => {
46 | fragmentName = value
47 | return BREAK
48 | }
49 | })
50 |
51 | return fragmentName
52 | }
53 |
54 | /**
55 | * Given an AST, extract the name of all requested fragments.
56 | *
57 | * @param {Object} ast GraphQL AST.
58 | * @return {[String]} an array with the name of all used fragments.
59 | */
60 | export const getRequestedFragmentNames = ast => {
61 | const fragmentNames = []
62 |
63 | visit(ast, {
64 | // FragmentSpread:
65 | Name: ({ value: fragment }, key, parent, path, ancestors) => {
66 | if (parent.kind === 'FragmentSpread') {
67 | fragmentNames.push(fragment)
68 | }
69 | }
70 | })
71 |
72 | return fragmentNames
73 | }
74 |
75 | /**
76 | * Asynchronously walk a React component tree to extract
77 | * any encountered fragments present on the given AST.
78 | *
79 | * @param {Object} tree A React component tree.
80 | * @param {Object} ast GraphQL AST.
81 | *
82 | * @return {Array} extracted fragments.
83 | */
84 | export const getQueryFragmentsFromTree = (tree, ast) => {
85 | let requestedFragments = getRequestedFragmentNames(ast)
86 |
87 | return getFragmentsFromTree(tree, fragment => {
88 | // When a fragment is found, eiher:
89 | // 1. it was requested by the AST, so not only should we extract this
90 | // fragment, but look for any nested fragments inside it.
91 | // 2. it was not requested by the AST, meaning we should skip it altogether.
92 | if (fragment) {
93 | if (requestedFragments.indexOf(getFragmentName(fragment)) !== -1) {
94 | requestedFragments = requestedFragments.concat(getRequestedFragmentNames(fragment))
95 | return true
96 | }
97 | else {
98 | return false
99 | }
100 | }
101 |
102 | // When no fragment found, just keep digging.
103 | return true
104 | })
105 | }
106 |
--------------------------------------------------------------------------------
/tests/Query.test.js:
--------------------------------------------------------------------------------
1 |
2 | /* eslint-disable react/prop-types */
3 | import React from 'react'
4 | import gql from 'graphql-tag'
5 | import { ApolloClient } from 'apollo-client'
6 | import { SchemaLink } from 'apollo-link-schema'
7 | import { InMemoryCache } from 'apollo-cache-inmemory'
8 | import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools'
9 | import { ApolloProvider } from 'react-apollo'
10 | import { mount } from 'enzyme'
11 |
12 | import { Query } from 'react-apollo-defragment'
13 |
14 | const typeDefs = `
15 | type Query {
16 | field: String
17 | typeOne: TypeOne
18 | typeTwo: TypeTwo
19 | }
20 |
21 | type TypeOne {
22 | typeOneField: String
23 | }
24 |
25 | type TypeTwo {
26 | typeTwoField: String
27 | nestedType: NestedType
28 | }
29 |
30 | type NestedType {
31 | nestedTypeField: String
32 | }
33 |
34 | schema {
35 | query: Query
36 | }
37 | `
38 |
39 | const defaultMocks = {
40 | Query: () => ({
41 | field: 'fieldValue',
42 | typeOne: () => ({}),
43 | typeTwo: () => ({}),
44 | }),
45 | TypeOne: () => ({
46 | typeOneField: 'typeOneFieldValue'
47 | }),
48 | TypeTwo: () => ({
49 | typeTwoField: 'typeTwoFieldValue'
50 | })
51 | }
52 |
53 | const getMockedClient = (mocks = defaultMocks) => {
54 | const schema = makeExecutableSchema({ typeDefs })
55 | addMockFunctionsToSchema({ schema, mocks })
56 |
57 | return new ApolloClient({
58 | cache: new InMemoryCache(),
59 | link: new SchemaLink({ schema })
60 | })
61 | }
62 |
63 | const noFragmentQuery = gql`
64 | query NoFragment {
65 | field
66 | }
67 | `
68 |
69 | const typeOneFragmentQuery = gql`
70 | query WithTypeOneFragment {
71 | typeOne {
72 | ...TypeOneFragment
73 | }
74 | }
75 | `
76 |
77 | const typeTwoFragmentQuery = gql`
78 | query WithTypeTwoFragment {
79 | typeTwo {
80 | ...TypeTwoFragment
81 | }
82 | }
83 | `
84 |
85 | const twoFragmentsQuery = gql`
86 | query WithTwoFragments {
87 | typeOne { ...TypeOneFragment }
88 | typeTwo { ...TypeTwoFragment }
89 | }
90 | `
91 |
92 | const typeOneFragment = gql`
93 | fragment TypeOneFragment on TypeOne {
94 | typeOneField
95 | }
96 | `
97 |
98 | const typeTwoFragment = gql`
99 | fragment TypeTwoFragment on TypeTwo {
100 | typeTwoField
101 | }
102 | `
103 |
104 | const DumbComponent = props =>
105 |
106 | const TypeOneFragmentComponent = props =>
107 | TypeOneFragmentComponent.fragment = typeOneFragment
108 |
109 | const TypeTwoFragmentComponent = props =>
110 | TypeTwoFragmentComponent.fragment = typeTwoFragment
111 |
112 | // const sleep = (ms = 1) => new Promise(resolve => setTimeout(resolve, ms))
113 |
114 | /**
115 | * @TODO: This is a very problematic code that intends to ensure any
116 | * query was resolved. We tried jest timer's control and promises, but
117 | * nothing did really work. Still, sometimes the test fails.
118 | */
119 | const update = (...mocks) => {
120 | let interval
121 |
122 | return new Promise(resolve => {
123 | interval = setInterval(() => {
124 | const loaded = mocks.every(
125 | ({ mock: { calls } }) => calls.some(
126 | ([{ loading }]) => !loading
127 | )
128 | )
129 |
130 | if (loaded) {
131 | clearInterval(interval)
132 | resolve()
133 | }
134 | }, 10)
135 | }).catch(() => clearInterval(interval))
136 | }
137 |
138 | describe('Query', () => {
139 | let wrapper = mount()
140 |
141 | afterEach(() => {
142 | // Ensure unmount for Apollo will still try to touch window if not so.
143 | wrapper.unmount()
144 | })
145 |
146 | it('should work exactly as does react-apollo\'s Query component', async () => {
147 | const client = getMockedClient()
148 | const component = jest.fn(() => null)
149 | const ConnectedComponent = () => (
150 |
151 | { component }
152 |
153 | )
154 |
155 | wrapper = mount(
156 |
157 |
158 |
159 | )
160 |
161 | expect(component.mock.calls[0][0].loading).toBe(true)
162 | expect(component.mock.calls[0][0].data.field).toBeUndefined()
163 |
164 | await update(component)
165 |
166 | expect(component.mock.calls[3][0].data.field).toBe('fieldValue')
167 | })
168 |
169 | it('should resolve sub-component fragments', async () => {
170 | const client = getMockedClient()
171 | const component = jest.fn(() => )
172 | const ConnectedComponent = () => (
173 |
174 | { component }
175 |
176 | )
177 |
178 | wrapper = mount(
179 |
180 |
181 |
182 | )
183 |
184 | expect(component.mock.calls[0][0].loading).toBe(true)
185 | expect(component.mock.calls[0][0].data.typeOne).toBeUndefined()
186 |
187 | await update(component)
188 |
189 | expect(component.mock.calls[3][0].loading).toBe(false)
190 | expect(component.mock.calls[3][0].data.typeOne.typeOneField).toBe('typeOneFieldValue')
191 | })
192 |
193 | it('should resolve deep sub-component fragments', async () => {
194 | const client = getMockedClient()
195 | const component = jest.fn(() => (
196 |
197 |
198 |
199 |
200 |
201 |
202 |
230 |
231 |
232 |
233 | ))
234 |
235 | const ConnectedComponent = () => (
236 |
237 | { component }
238 |
239 | )
240 |
241 | wrapper = mount(
242 |
243 |
244 |
245 | )
246 |
247 | expect(component.mock.calls[0][0].loading).toBe(true)
248 | expect(component.mock.calls[0][0].data.typeOne).toBeUndefined()
249 |
250 | await update(component)
251 |
252 | expect(component.mock.calls[3][0].loading).toBe(false)
253 | expect(component.mock.calls[3][0].data.typeOne.typeOneField).toBe('typeOneFieldValue')
254 | expect(component.mock.calls[3][0].data.typeTwo.typeTwoField).toBe('typeTwoFieldValue')
255 | })
256 |
257 | it('should resolve duplicated sub-component fragments', async () => {
258 | const client = getMockedClient()
259 | const component = jest.fn(() => (
260 |
261 |
262 |
263 |
264 | ))
265 |
266 | const ConnectedComponent = () => (
267 |
268 | { component }
269 |
270 | )
271 |
272 | wrapper = mount(
273 |
274 |
275 |
276 | )
277 |
278 | expect(component.mock.calls[0][0].loading).toBe(true)
279 | expect(component.mock.calls[0][0].data.typeOne).toBeUndefined()
280 |
281 | await update(component)
282 |
283 | expect(component.mock.calls[3][0].loading).toBe(false)
284 | expect(component.mock.calls[3][0].data.typeOne.typeOneField).toBe('typeOneFieldValue')
285 | })
286 |
287 | it('should resolve nested sub-component fragments', async () => {
288 | const client = getMockedClient()
289 | const component = jest.fn(() => (
290 |
291 |
292 |
293 |
294 |
295 | ))
296 |
297 | const ConnectedComponent = () => (
298 |
299 | { component }
300 |
301 | )
302 |
303 | wrapper = mount(
304 |
305 |
306 |
307 | )
308 |
309 | expect(component.mock.calls[0][0].loading).toBe(true)
310 | expect(component.mock.calls[0][0].data.typeOne).toBeUndefined()
311 |
312 | await update(component)
313 |
314 | expect(component.mock.calls[3][0].loading).toBe(false)
315 | expect(component.mock.calls[3][0].data.typeOne.typeOneField).toBe('typeOneFieldValue')
316 | expect(component.mock.calls[3][0].data.typeTwo.typeTwoField).toBe('typeTwoFieldValue')
317 | })
318 |
319 | // Interference between nested fragments.
320 | // --------------------------------------
321 |
322 | it('should ignore non-interesting sub-component fragments', async () => {
323 | const client = getMockedClient()
324 | const component = jest.fn(() => (
325 |
326 |
327 |
328 |
329 |
330 | ))
331 |
332 | const ConnectedComponent = () => (
333 |
334 | { component }
335 |
336 | )
337 |
338 | wrapper = mount(
339 |
340 |
341 |
342 | )
343 |
344 | expect(component.mock.calls[0][0].loading).toBe(true)
345 | expect(component.mock.calls[0][0].data.typeOne).toBeUndefined()
346 |
347 | await update(component)
348 |
349 | expect(component.mock.calls[3][0].loading).toBe(false)
350 | expect(component.mock.calls[3][0].data.typeOne.typeOneField).toBe('typeOneFieldValue')
351 | expect(component.mock.calls[3][0].data.typeTwo).toBeUndefined()
352 | })
353 |
354 | it('should resolve sub-component fragments on nested queries', async () => {
355 | const client = getMockedClient()
356 |
357 | const inner = jest.fn(() => (
358 |
359 | ))
360 |
361 | const outer = jest.fn(() => (
362 |
363 | { inner }
364 |
365 | ))
366 |
367 | const ConnectedComponent = () => (
368 |
369 | { outer }
370 |
371 | )
372 |
373 | wrapper = mount(
374 |
375 |
376 |
377 | )
378 |
379 | expect(outer.mock.calls[0][0].loading).toBe(true)
380 | expect(outer.mock.calls[0][0].data.typeOne).toBeUndefined()
381 |
382 | expect(inner.mock.calls[0][0].loading).toBe(true)
383 | expect(inner.mock.calls[0][0].data.field).toBeUndefined()
384 |
385 | await update(outer, inner)
386 |
387 | expect(outer.mock.calls[3][0].loading).toBe(false)
388 | expect(outer.mock.calls[3][0].data.typeOne.typeOneField).toBe('typeOneFieldValue')
389 |
390 | expect(inner.mock.calls[7][0].loading).toBe(false)
391 | expect(inner.mock.calls[7][0].data.field).toBe('fieldValue')
392 | })
393 |
394 | it('should resolve sub-component fragments on nested fragmented queries', async () => {
395 | const client = getMockedClient()
396 |
397 | const inner = jest.fn(() => (
398 |
399 |
400 |
401 |
402 | ))
403 |
404 | const outer = jest.fn(() => (
405 |
406 | { inner }
407 |
408 | ))
409 |
410 | const ConnectedComponent = () => (
411 |
412 | { outer }
413 |
414 | )
415 |
416 | wrapper = mount(
417 |
418 |
419 |
420 | )
421 |
422 | expect(outer.mock.calls[0][0].loading).toBe(true)
423 | expect(outer.mock.calls[0][0].data.typeOne).toBeUndefined()
424 |
425 | expect(inner.mock.calls[0][0].loading).toBe(true)
426 | expect(inner.mock.calls[0][0].data.field).toBeUndefined()
427 |
428 | await update(outer, inner)
429 |
430 | expect(outer.mock.calls[3][0].loading).toBe(false)
431 | expect(outer.mock.calls[3][0].data.typeOne.typeOneField).toBe('typeOneFieldValue')
432 |
433 | expect(inner.mock.calls[7][0].loading).toBe(false)
434 | expect(inner.mock.calls[7][0].data.typeTwo.typeTwoField).toBe('typeTwoFieldValue')
435 | })
436 |
437 | it('should resolve repeated sub-component fragments on nested fragmented queries', async () => {
438 | const client = getMockedClient()
439 |
440 | const inner = jest.fn(() => (
441 |
442 |
443 |
444 |
445 | ))
446 |
447 | const outer = jest.fn(() => (
448 |
449 | { inner }
450 |
451 | ))
452 |
453 | const ConnectedComponent = () => (
454 |
455 | { outer }
456 |
457 | )
458 |
459 | wrapper = mount(
460 |
461 |
462 |
463 | )
464 |
465 | expect(outer.mock.calls[0][0].loading).toBe(true)
466 | expect(outer.mock.calls[0][0].data.typeOne).toBeUndefined()
467 |
468 | expect(inner.mock.calls[0][0].loading).toBe(true)
469 | expect(inner.mock.calls[0][0].data.field).toBeUndefined()
470 |
471 | await update(outer, inner)
472 |
473 | expect(outer.mock.calls[3][0].loading).toBe(false)
474 | expect(outer.mock.calls[3][0].data.typeOne.typeOneField).toBe('typeOneFieldValue')
475 | expect(outer.mock.calls[3][0].data.typeTwo).toBeUndefined()
476 |
477 | expect(inner.mock.calls[6][0].loading).toBe(false)
478 | expect(inner.mock.calls[6][0].data.typeOne.typeOneField).toBe('typeOneFieldValue')
479 | expect(inner.mock.calls[6][0].data.typeTwo.typeTwoField).toBe('typeTwoFieldValue')
480 | })
481 |
482 | it('should not execute nested queries while defragmenting', async () => {
483 | const client = getMockedClient()
484 |
485 | const inner = jest.fn(() => (
486 |
487 |
488 |
489 |
490 | ))
491 |
492 | const outer = jest.fn(() => (
493 |
494 | { inner }
495 |
496 | ))
497 |
498 | const ConnectedComponent = () => (
499 |
500 | { outer }
501 |
502 | )
503 |
504 | wrapper = mount(
505 |
506 |
507 |
508 | )
509 |
510 | expect(outer.mock.calls[0][0].loading).toBe(true)
511 | expect(outer.mock.calls[0][0].data.typeOne).toBeUndefined()
512 |
513 | expect(inner.mock.calls[0][0].loading).toBe(true)
514 | expect(inner.mock.calls[0][0].data.field).toBeUndefined()
515 |
516 | await update(outer, inner)
517 |
518 | expect(outer.mock.calls[3][0].loading).toBe(false)
519 | expect(outer.mock.calls[3][0].data.typeOne.typeOneField).toBe('typeOneFieldValue')
520 |
521 | // Identify amount of times the loading finished. Should be only one.
522 | expect(inner.mock.calls.filter(([{ loading }]) => !loading).length).toBe(1)
523 | })
524 |
525 | // @TODO: test temporarily injected data.
526 | })
527 |
--------------------------------------------------------------------------------
/tests/utils/getFragmentName.test.js:
--------------------------------------------------------------------------------
1 | import gql from 'graphql-tag'
2 |
3 | import { getFragmentName } from 'react-apollo-defragment'
4 |
5 | describe('getFragmentName', () => {
6 | it('should extract a fragment AST name', () => {
7 | const fragment = gql`
8 | fragment Fragment on Type {
9 | field
10 | }
11 | `
12 |
13 | expect(getFragmentName(fragment)).toBe('Fragment')
14 | })
15 |
16 | it('should silently return null when no fragment is found', () => {
17 | const fragment = gql`
18 | query Name {
19 | field
20 | }
21 | `
22 |
23 | expect(getFragmentName(fragment)).toBe(null)
24 | })
25 | })
26 |
--------------------------------------------------------------------------------
/tests/utils/getFragmentsFromTree.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React from 'react'
3 | import gql from 'graphql-tag'
4 |
5 | import { getFragmentsFromTree } from 'react-apollo-defragment'
6 |
7 | describe('getFragmentsFromTree', () => {
8 | const getFragmentComponent = ({
9 | name = 'Fragment',
10 | type = 'Type'
11 | } = {}) => {
12 | const Component = ({ children }) => { children }
13 | Component.fragment = gql`
14 | fragment ${name} on ${type} {
15 | field
16 | }
17 | `
18 | return Component
19 | }
20 |
21 | it('should extract a first-level fragment', async () => {
22 | const Component = getFragmentComponent()
23 | const tree = (
24 |
25 | )
26 |
27 | const fragments = await getFragmentsFromTree(tree)
28 |
29 | expect(fragments.length).toBe(1)
30 | expect(fragments[0].loc.source.body).toContain('fragment Fragment on Type')
31 | })
32 |
33 | it('should extract a inner-level fragment', async () => {
34 | const Component = getFragmentComponent()
35 | const tree = (
36 |
41 | )
42 |
43 | const fragments = await getFragmentsFromTree(tree)
44 |
45 | expect(fragments.length).toBe(1)
46 | expect(fragments[0].loc.source.body).toContain('fragment Fragment on Type')
47 | })
48 |
49 | it('should extract multiple fragments', async () => {
50 | const FirstComponent = getFragmentComponent({ name: 'FirstFragment' })
51 | const SecondComponent = getFragmentComponent({ name: 'SecondFragment' })
52 | const tree = (
53 |
54 |
55 |
56 |
57 | )
58 |
59 | const fragments = await getFragmentsFromTree(tree)
60 |
61 | expect(fragments.length).toBe(2)
62 | expect(fragments[0].loc.source.body).toContain('fragment FirstFragment on Type')
63 | expect(fragments[1].loc.source.body).toContain('fragment SecondFragment on Type')
64 | })
65 |
66 | it('should extract nested fragments', async () => {
67 | const ParentComponent = getFragmentComponent({ name: 'ParentFragment' })
68 | const ChildComponent = getFragmentComponent({ name: 'ChildFragment' })
69 | const tree = (
70 |
75 | )
76 |
77 | const fragments = await getFragmentsFromTree(tree)
78 |
79 | expect(fragments.length).toBe(2)
80 | expect(fragments[0].loc.source.body).toContain('fragment ParentFragment on Type')
81 | expect(fragments[1].loc.source.body).toContain('fragment ChildFragment on Type')
82 | })
83 |
84 | it('should extract multiple nested fragments', async () => {
85 | const ParentComponent = getFragmentComponent({ name: 'ParentFragment' })
86 | const FirstChildComponent = getFragmentComponent({ name: 'FirstFragment' })
87 | const SecondChildComponent = getFragmentComponent({ name: 'SecondFragment' })
88 | const tree = (
89 |
95 | )
96 |
97 | const fragments = await getFragmentsFromTree(tree)
98 |
99 | expect(fragments.length).toBe(3)
100 | expect(fragments[0].loc.source.body).toContain('fragment ParentFragment on Type')
101 | expect(fragments[1].loc.source.body).toContain('fragment FirstFragment on Type')
102 | expect(fragments[2].loc.source.body).toContain('fragment SecondFragment on Type')
103 | })
104 |
105 | describe('dive control', () => {
106 | it('should be possible to avoid first-level extraction', async () => {
107 | const Component = getFragmentComponent()
108 | const tree = (
109 |
110 | )
111 |
112 | const dive = () => false
113 | const fragments = await getFragmentsFromTree(tree, dive)
114 |
115 | expect(fragments.length).toBe(0)
116 | })
117 |
118 | it('should be possible to avoid inner-level extraction', async () => {
119 | const Component = getFragmentComponent()
120 | const tree = (
121 |
122 |
123 |
124 | )
125 |
126 | const dive = () => false
127 | const fragments = await getFragmentsFromTree(tree, dive)
128 |
129 | expect(fragments.length).toBe(0)
130 | })
131 |
132 | it('should receive extracted fragment on the diving predicate', async () => {
133 | const Component = getFragmentComponent()
134 | const tree = (
135 |
136 | )
137 |
138 | const dive = jest.fn(() => true)
139 | const fragments = await getFragmentsFromTree(tree, dive)
140 |
141 | expect(dive.mock.calls[0][0]).toBe(fragments[0])
142 | })
143 | })
144 | })
145 |
--------------------------------------------------------------------------------
/tests/utils/getQueryFragmentsFromTree.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React from 'react'
3 | import gql from 'graphql-tag'
4 |
5 | import { getQueryFragmentsFromTree } from 'react-apollo-defragment'
6 |
7 | describe('getQueryFragmentsFromTree', () => {
8 | const getFragmentComponent = ({
9 | name = 'Fragment',
10 | type = 'Type',
11 | fields = 'field'
12 | } = {}) => {
13 | const FragmentComponent = ({ children }) => { children }
14 |
15 | FragmentComponent.fragment = gql`
16 | fragment ${name} on ${type} {
17 | ${fields}
18 | }
19 | `
20 |
21 | return FragmentComponent
22 | }
23 |
24 | it('should extract a present fragment', async () => {
25 | const Component = getFragmentComponent()
26 | const tree = (
27 |
28 | )
29 |
30 | const query = gql`
31 | query Query {
32 | type {
33 | ...Fragment
34 | }
35 | }
36 | `
37 |
38 | const fragments = await getQueryFragmentsFromTree(tree, query)
39 |
40 | expect(fragments.length).toBe(1)
41 | expect(fragments[0].loc.source.body).toContain('fragment Fragment on Type')
42 | })
43 |
44 | it('should NOT extract a non-present fragment', async () => {
45 | const Component = getFragmentComponent()
46 | const tree = (
47 |
48 | )
49 |
50 | const query = gql`
51 | query Query {
52 | type {
53 | ...NonExistingFragment
54 | }
55 | }
56 | `
57 |
58 | const fragments = await getQueryFragmentsFromTree(tree, query)
59 |
60 | expect(fragments.length).toBe(0)
61 | })
62 |
63 | it('should extract a inner-level present fragment', async () => {
64 | const Component = getFragmentComponent()
65 | const tree = (
66 |
71 | )
72 |
73 | const query = gql`
74 | query Query {
75 | type {
76 | ...Fragment
77 | }
78 | }
79 | `
80 |
81 | const fragments = await getQueryFragmentsFromTree(tree, query)
82 |
83 | expect(fragments.length).toBe(1)
84 | expect(fragments[0].loc.source.body).toContain('fragment Fragment on Type')
85 | })
86 |
87 | it('should extract multiple fragments', async () => {
88 | const FirstComponent = getFragmentComponent({ name: 'FirstFragment' })
89 | const SecondComponent = getFragmentComponent({ name: 'SecondFragment' })
90 | const tree = (
91 |
92 |
93 |
94 |
95 | )
96 |
97 | const query = gql`
98 | query Query {
99 | type {
100 | ...FirstFragment
101 | ...SecondFragment
102 | }
103 | }
104 | `
105 |
106 | const fragments = await getQueryFragmentsFromTree(tree, query)
107 |
108 | expect(fragments.length).toBe(2)
109 | expect(fragments[0].loc.source.body).toContain('fragment FirstFragment on Type')
110 | expect(fragments[1].loc.source.body).toContain('fragment SecondFragment on Type')
111 | })
112 |
113 | it('should extract nested fragments', async () => {
114 | const ChildComponent = getFragmentComponent({ name: 'ChildFragment' })
115 |
116 | const ParentComponent = getFragmentComponent({
117 | name: 'ParentFragment',
118 | fields: '...ChildFragment'
119 | })
120 |
121 | const tree = (
122 |
127 | )
128 |
129 | const query = gql`
130 | query Query {
131 | type {
132 | ...ParentFragment
133 | }
134 | }
135 | `
136 |
137 | const fragments = await getQueryFragmentsFromTree(tree, query)
138 |
139 | expect(fragments.length).toBe(2)
140 | expect(fragments[0].loc.source.body).toContain('fragment ParentFragment on Type')
141 | expect(fragments[1].loc.source.body).toContain('fragment ChildFragment on Type')
142 | })
143 |
144 | it('should extract multiple nested fragments', async () => {
145 | const FirstChildComponent = getFragmentComponent({ name: 'FirstFragment' })
146 | const SecondChildComponent = getFragmentComponent({ name: 'SecondFragment' })
147 |
148 | const ParentComponent = getFragmentComponent({
149 | name: 'ParentFragment',
150 | fields: `
151 | ...FirstFragment
152 | ...SecondFragment
153 | `
154 | })
155 |
156 | const tree = (
157 |
158 |
159 |
160 |
161 |
162 |