diff --git a/Changelog.md b/Changelog.md index 32471d1b16..59982464a4 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,22 +1,30 @@ # Change log ### next -- Update all dependencies, scripts' usage, prettier and typescript setup [#1402](https://github.com/apollographql/react-apollo/pull/1402) -- Tests are now linted and verified valid typescript [#1402](https://github.com/apollographql/react-apollo/pull/1402) -- Typescript - updated `types` for consistency and potential to pass through all types e.g. `TProps, TData, TGraphQLVariables` [#1402](https://github.com/apollographql/react-apollo/pull/1402) -- Typescript - added `ChildDataProps` and `ChildMutateProps` for optional stronger typed usage version of `ChildProps` [#1402](https://github.com/apollographql/react-apollo/pull/1402) -- **BREAKING [Typescript usage only]** - `graphql` parameterized types streamlined for + +- **BREAKING CHANGES** + - typescript - `graphql` parameterized types streamlined for a) full typing; and b) ease of use; and c) consistency. New parameterized is: `graphql` where none are required and full typing only requires the first three params (`TChildProps` can be derived). [#1402](https://github.com/apollographql/react-apollo/pull/1402) -- Typescript - fix `graphql` HOC inference [#1402](https://github.com/apollographql/react-apollo/pull/1402) -- **Remove deprecated** `operationOptions.options.skip`, use `operationOptions.skip` instead -- Added component [#1398](https://github.com/apollographql/react-apollo/pull/1398) -- Made prettier solely responsible for formatting, removed all formatting linting rules from tslint [#1452](https://github.com/apollographql/react-apollo/pull/1452) -- Add component [#1399](https://github.com/apollographql/react-apollo/pull/1399) -- Convert `Query.test` to `tsx` and parameterize types for `Query` [#1462](https://github.com/apollographql/react-apollo/pull/1462) -- Remove copied `shallowEqual` code and delegate to `fbjs` [#1465](https://github.com/apollographql/react-apollo/pull/1465) - + - Remove deprecated `operationOptions.options.skip`, use `operationOptions.skip` instead + - Rename type `ProviderProps` to `ApolloProviderProps` [#1467](https://github.com/apollographql/react-apollo/pull/1467) + - Rename `getDataFromTree` type `QueryResult` to `QueryTreeResult` [#1467](https://github.com/apollographql/react-apollo/pull/1467) + - Rename type `QueryProps` to `GraphqlQueryControls` [#1467](https://github.com/apollographql/react-apollo/pull/1467) + +- **Other Changes** + - Update all dependencies, scripts' usage, prettier and typescript setup [#1402](https://github.com/apollographql/react-apollo/pull/1402) + - Tests are now linted and verified valid typescript [#1402](https://github.com/apollographql/react-apollo/pull/1402) + - Typescript - updated `types` for consistency and potential to pass through all types e.g. `TProps, TData, TGraphQLVariables` [#1402](https://github.com/apollographql/react-apollo/pull/1402) + - Typescript - added `ChildDataProps` and `ChildMutateProps` for optional stronger typed usage version of `ChildProps` [#1402](https://github.com/apollographql/react-apollo/pull/1402) + - Typescript - fix `graphql` HOC inference [#1402](https://github.com/apollographql/react-apollo/pull/1402) + - Added component [#1398](https://github.com/apollographql/react-apollo/pull/1398) + - Made prettier solely responsible for formatting, removed all formatting linting rules from tslint [#1452](https://github.com/apollographql/react-apollo/pull/1452) + - Add component [#1399](https://github.com/apollographql/react-apollo/pull/1399) + - Convert `Query.test` to `tsx` and parameterize types for `Query` [#1462](https://github.com/apollographql/react-apollo/pull/1462) + - Remove copied `shallowEqual` code and delegate to `fbjs` [#1465](https://github.com/apollographql/react-apollo/pull/1465) + - Update rollup configurations, refine package exports [#1467](https://github.com/apollographql/react-apollo/pull/1467) + ### 2.0.4 - rolled back on the lodash-es changes from [#1344](https://github.com/apollographql/react-apollo/pull/1344) due to build diff --git a/package.json b/package.json index 6ceff11f93..40d11a25d8 100644 --- a/package.json +++ b/package.json @@ -16,12 +16,12 @@ "test-watch": "jest --watch", "filesize": "bundlesize", "type-check": "tsc --project tsconfig.json --noEmit && flow check", - "precompile": "rimraf lib", + "precompile": "rimraf lib && rimraf npm", "compile": "tsc --project tsconfig.json && rimraf lib/test && mv lib/src/* lib/. && rimraf lib/src", "postcompile": "npm run bundle", "bundle": - "rollup -c && rollup -c rollup.browser.config.js && rollup -c rollup.test-utils.config.js", + "rollup -c rollup.config.js && rollup -c rollup.test-utils.config.js", "watch": "tsc -w", "lint": "tslint --project tsconfig.json --config tslint.json", "lint:fix": @@ -32,8 +32,8 @@ }, "bundlesize": [ { - "path": "./lib/react-apollo.browser.umd.js", - "threshold": "10 Kb" + "path": "./lib/umd/react-apollo.umd.js", + "threshold": "1 Kb" } ], "lint-staged": { diff --git a/rollup.browser.config.js b/rollup.browser.config.js deleted file mode 100644 index 53ce135e17..0000000000 --- a/rollup.browser.config.js +++ /dev/null @@ -1,16 +0,0 @@ -export default { - entry: "lib/browser.js", - dest: "lib/react-apollo.browser.umd.js", - format: "umd", - sourceMap: true, - moduleName: "react-apollo", - onwarn, -}; - -function onwarn(message) { - const suppressed = ["UNRESOLVED_IMPORT", "THIS_IS_UNDEFINED"]; - - if (!suppressed.find(code => message.code === code)) { - return console.warn(message.message); - } -} diff --git a/rollup.config.js b/rollup.config.js index 10188409a1..cfaab894ab 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,14 +1,16 @@ export default { - entry: "lib/index.js", - dest: "lib/react-apollo.umd.js", - format: "umd", - sourceMap: true, - moduleName: "react-apollo", + input: 'lib/index.js', + output: { + file: 'lib/umd/react-apollo.umd.js', + format: 'umd', + name: 'react-apollo', + sourcemap: true, + }, onwarn, }; function onwarn(message) { - const suppressed = ["UNRESOLVED_IMPORT", "THIS_IS_UNDEFINED"]; + const suppressed = ['UNRESOLVED_IMPORT', 'THIS_IS_UNDEFINED']; if (!suppressed.find(code => message.code === code)) { return console.warn(message.message); diff --git a/rollup.test-utils.config.js b/rollup.test-utils.config.js index bc7ddb06dd..4507fc784f 100644 --- a/rollup.test-utils.config.js +++ b/rollup.test-utils.config.js @@ -1,14 +1,16 @@ export default { - entry: "lib/test-utils.js", - dest: "lib/test-utils.js", - format: "umd", - sourceMap: true, - moduleName: "react-apollo", + input: 'lib/test-utils.js', + output: { + file: 'lib/umd/test-utils.js', + format: 'umd', + name: 'react-apollo', + sourcemap: true, + }, onwarn, }; function onwarn(message) { - const suppressed = ["UNRESOLVED_IMPORT", "THIS_IS_UNDEFINED"]; + const suppressed = ['UNRESOLVED_IMPORT', 'THIS_IS_UNDEFINED']; if (!suppressed.find(code => message.code === code)) { return console.warn(message.message); diff --git a/scripts/prepare-package.sh b/scripts/prepare-package.sh index 62821effde..6e48388830 100755 --- a/scripts/prepare-package.sh +++ b/scripts/prepare-package.sh @@ -7,7 +7,7 @@ # # Clear the built output -rm -rf ./lib +rm -rf ./lib ./npm # Compile new files npm run compile @@ -18,8 +18,6 @@ mkdir ./npm # Copy all files from ./lib to /npm cd ./lib && cp -r ./ ../npm/ -# Copy also the umd bundle with the source map file -cp react-apollo.umd.js ../npm/ && cp react-apollo.umd.js.map ../npm/ # Back to the root directory cd ../ @@ -34,8 +32,7 @@ node -e "var package = require('./package.json'); \ delete package[\"pre-commit\"]; \ delete package.scripts; \ delete package.options; \ - package.main = 'react-apollo.umd.js'; \ - package.browser = 'react-apollo.browser.umd.js'; \ + package.main = 'umd/react-apollo.umd.js'; \ package.module = 'index.js'; \ package['jsnext:main'] = 'index.js'; \ package.typings = 'index.d.ts'; \ diff --git a/src/ApolloProvider.tsx b/src/ApolloProvider.tsx index d278653a40..b25edaa4c5 100644 --- a/src/ApolloProvider.tsx +++ b/src/ApolloProvider.tsx @@ -1,18 +1,17 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import { Component } from 'react'; - import ApolloClient from 'apollo-client'; import QueryRecyclerProvider from './QueryRecyclerProvider'; const invariant = require('invariant'); -export interface ProviderProps { +export interface ApolloProviderProps { client: ApolloClient; } export default class ApolloProvider extends Component< - ProviderProps + ApolloProviderProps > { static propTypes = { client: PropTypes.object.isRequired, diff --git a/src/Query.tsx b/src/Query.tsx index e5dcdb3ad1..e690551db3 100644 --- a/src/Query.tsx +++ b/src/Query.tsx @@ -14,8 +14,8 @@ import { DocumentNode } from 'graphql'; import { ZenObservable } from 'zen-observable-ts'; import { OperationVariables } from './types'; import { parser, DocumentType } from './parser'; -import shallowEqual = require('fbjs/lib/shallowEqual'); +const shallowEqual = require('fbjs/lib/shallowEqual'); const invariant = require('invariant'); const pick = require('lodash.pick'); diff --git a/src/browser.ts b/src/browser.ts deleted file mode 100644 index ecde580b0b..0000000000 --- a/src/browser.ts +++ /dev/null @@ -1,18 +0,0 @@ -export { default as ApolloProvider } from './ApolloProvider'; -export { default as Query } from './Query'; -export { default as graphql } from './graphql'; -export { - MutationOpts, - QueryOpts, - QueryProps, - NamedProps, - MutationFunc, - OptionProps, - ChildProps, - OperationOption, -} from './types'; -export { withApollo } from './withApollo'; - -// expose easy way to join queries from redux -import * as compose from 'lodash.flowright'; -export { compose }; diff --git a/src/getDataFromTree.ts b/src/getDataFromTree.ts index a87de32465..49f5f3897d 100755 --- a/src/getDataFromTree.ts +++ b/src/getDataFromTree.ts @@ -13,7 +13,7 @@ export interface QueryTreeArgument { rootContext?: Context; } -export interface QueryResult { +export interface QueryTreeResult { query: Promise>; element: ReactElement; context: Context; @@ -122,7 +122,7 @@ export function walkTree( function getQueriesFromTree( { rootElement, rootContext = {} }: QueryTreeArgument, fetchRoot: boolean = true, -): QueryResult[] { +): QueryTreeResult[] { const queries = []; walkTree(rootElement, rootContext, (element, instance, context) => { @@ -143,7 +143,7 @@ function getQueriesFromTree( } // XXX component Cache -export function getDataFromTree( +export default function getDataFromTree( rootElement: ReactElement, rootContext: any = {}, fetchRoot: boolean = true, diff --git a/src/graphql.tsx b/src/graphql.tsx index 361e4a9fbc..9bc9df12b2 100644 --- a/src/graphql.tsx +++ b/src/graphql.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import shallowEqual = require('fbjs/lib/shallowEqual'); import ApolloClient, { ObservableQuery, ApolloQueryResult, @@ -13,11 +12,12 @@ import { ChildProps, OperationOption, QueryOpts, - QueryProps, + GraphqlQueryControls, MutationFunc, OptionProps, } from './types'; +const shallowEqual = require('fbjs/lib/shallowEqual'); const invariant = require('invariant'); const assign = require('object-assign'); const pick = require('lodash.pick'); @@ -313,7 +313,9 @@ export default function graphql< return opts; } - calculateResultProps(result: (QueryProps & TData) | MutationFunc) { + calculateResultProps( + result: (GraphqlQueryControls & TData) | MutationFunc, + ) { let name = this.type === DocumentType.Mutation ? 'mutate' : 'data'; if (operationOptions.name) name = operationOptions.name; @@ -397,7 +399,7 @@ export default function graphql< } } - // For server-side rendering (see server.ts) + // For server-side rendering (see renderToStringWithData.ts) fetchData(): Promise> | boolean { if (this.shouldSkip()) return false; if ( @@ -573,14 +575,14 @@ export default function graphql< // handle race condition where refetch is called on child mount if (!this.querySubscription) { - (data as QueryProps).refetch = args => { + (data as GraphqlQueryControls).refetch = args => { return new Promise((r, f) => { this.refetcherQueue = { resolve: r, reject: f, args }; }); }; } } - return data as QueryProps & TData; + return data as GraphqlQueryControls & TData; } render() { diff --git a/src/index.ts b/src/index.ts index 20cb892110..8bb83ee236 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,21 @@ -export * from './browser'; +export { default as getDataFromTree } from './getDataFromTree'; export * from './getDataFromTree'; -export { renderToStringWithData } from './server'; + +export { default as renderToStringWithData } from './renderToStringWithData'; + +export { default as ApolloProvider } from './ApolloProvider'; +export * from './ApolloProvider'; + +export { default as Query } from './Query'; +export * from './Query'; + +export { default as graphql } from './graphql'; +export * from './graphql'; + +export { default as withApollo } from './withApollo'; + export * from './types'; + +// expose easy way to join queries from redux +import * as compose from 'lodash.flowright'; +export { compose }; diff --git a/src/queryRecycler.ts b/src/queryRecycler.ts index e96dddf1d9..5e22de06bd 100644 --- a/src/queryRecycler.ts +++ b/src/queryRecycler.ts @@ -1,8 +1,9 @@ import { ObservableQuery } from 'apollo-client'; import { ZenObservable } from 'zen-observable-ts'; -import shallowEqual = require('fbjs/lib/shallowEqual'); import { QueryOpts } from './types'; +const shallowEqual = require('fbjs/lib/shallowEqual'); + // XXX move this logic to ObservableQuery / QueryManager in apollo-client /** diff --git a/src/renderToStringWithData.ts b/src/renderToStringWithData.ts new file mode 100755 index 0000000000..5fa1a2cf3f --- /dev/null +++ b/src/renderToStringWithData.ts @@ -0,0 +1,11 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom/server'; +import getDataFromTree from './getDataFromTree'; + +export default function renderToStringWithData( + component: React.ReactElement, +): Promise { + return getDataFromTree(component).then(() => + ReactDOM.renderToString(component), + ); +} diff --git a/src/server.ts b/src/server.ts deleted file mode 100755 index 06ed8d694f..0000000000 --- a/src/server.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ReactElement } from 'react'; -import * as ReactDOM from 'react-dom/server'; - -import { getDataFromTree } from './getDataFromTree'; - -export function renderToStringWithData( - component: ReactElement, -): Promise { - return getDataFromTree(component).then(() => - ReactDOM.renderToString(component), - ); -} diff --git a/src/types.ts b/src/types.ts index db1ea2edad..abe2c37de7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -36,7 +36,7 @@ export interface QueryOpts { notifyOnNetworkStatusChange?: boolean; } -export interface QueryProps { +export interface GraphqlQueryControls { error?: ApolloError; networkStatus: number; loading: boolean; @@ -63,7 +63,7 @@ export type MutationFunc< export type DataValue< TData, TGraphQLVariables = OperationVariables -> = QueryProps & +> = GraphqlQueryControls & // data may not yet be loaded Partial; diff --git a/src/withApollo.tsx b/src/withApollo.tsx index ec3a3eb0b8..b1d1de9bac 100644 --- a/src/withApollo.tsx +++ b/src/withApollo.tsx @@ -1,17 +1,16 @@ import * as React from 'react'; +import { OperationOption } from './types'; +import ApolloConsumer from './ApolloConsumer'; const invariant = require('invariant'); const hoistNonReactStatics = require('hoist-non-react-statics'); -import { OperationOption } from './types'; -import ApolloConsumer from './ApolloConsumer'; - function getDisplayName(WrappedComponent) { return WrappedComponent.displayName || WrappedComponent.name || 'Component'; } -export function withApollo( +export default function withApollo( WrappedComponent, operationOptions: OperationOption = {}, ) { diff --git a/test/flow-usage.js b/test/flow-usage.js index 771491d312..fecb54828c 100644 --- a/test/flow-usage.js +++ b/test/flow-usage.js @@ -13,7 +13,11 @@ import gql from 'graphql-tag'; import React from 'react'; import { withApollo, compose, graphql } from '../src'; -import type { OperationComponent, QueryProps, ChildProps } from '../src'; +import type { + OperationComponent, + GraphqlQueryControls, + ChildProps, +} from '../src'; const query = gql` { @@ -59,7 +63,7 @@ const BasicClassWithData = withData(BasicComponent); // A class component with it's own variable type CmplxOwnProps = {| faz: string |}; type CmplxComponentProps = { - data: QueryProps & IQuery, + data: GraphqlQueryControls & IQuery, mutate: any, // The mutation is actually required or we get a error at the withData } & CmplxOwnProps; class CmplxComponent extends React.Component { @@ -86,7 +90,7 @@ const CmplxWithData = withFancyData(CmplxComponent); // since we don't rely on the ChildProps we don't need the mutate: any type Cmplx2OwnProps = { faz: string }; // We can have exact own props as we don't rely on the TMergedProps type Cmplx2ComponentProps = { - data: IQuery & QueryProps, + data: IQuery & GraphqlQueryControls, } & Cmplx2OwnProps; class Cmplx2Component extends React.Component { render() { @@ -137,7 +141,7 @@ type Response = { hero: Hero, }; -type Props = Response & QueryProps; +type Props = Response & GraphqlQueryControls; export type InputProps = { episode: string, diff --git a/test/typescript-usage.tsx b/test/typescript-usage.tsx index af6a605b31..c109ddbf0f 100644 --- a/test/typescript-usage.tsx +++ b/test/typescript-usage.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import gql from 'graphql-tag'; import { graphql } from '../src'; -import { ChildProps, NamedProps, QueryProps } from '../src'; +import { ChildProps, NamedProps, GraphqlQueryControls } from '../src'; const historyQuery = gql` query history($solutionId: String) { @@ -114,7 +114,7 @@ const withHistoryUsingName = graphql(historyQuery, { name: 'organisationData', props: ({ organisationData, - }: NamedProps<{ organisationData: QueryProps & Data }, Props>) => ({ + }: NamedProps<{ organisationData: GraphqlQueryControls & Data }, Props>) => ({ ...organisationData, }), }); diff --git a/tsconfig.json b/tsconfig.json index c302bbd63f..9772b4be87 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "module": "commonjs", + "module": "es2015", "target": "es2015", "lib": ["es2015", "dom"], "moduleResolution": "node",