apollo-fragment-react - npm Package Compare versions

Comparing version 0.7.1 to 1.0.0

lib/bundle.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-apollo'), require('apollo-fragment-utils'), require('compose-tiny')) :
-	typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-apollo', 'apollo-fragment-utils', 'compose-tiny'], factory) :
-	(factory((global.apolloFragmentReact = global.apolloFragmentReact || {}, global.apolloFragmentReact.state = {}),global.React,global.reactApollo,global.apolloFragmentUtils,global._rollupCompose));
-}(this, (function (exports,React,reactApollo,apolloFragmentUtils,_rollupCompose) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@apollo/client/react'), require('apollo-fragment-utils')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'react', '@apollo/client/react', 'apollo-fragment-utils'], factory) :
+	(factory((global.apolloFragmentReact = global.apolloFragmentReact || {}, global.apolloFragmentReact.state = {}),global.React,global.react,global.apolloFragmentUtils));
+}(this, (function (exports,React,react,apolloFragmentUtils) { 'use strict';
 
-var _rollupCompose__default = _rollupCompose['default'];
-
 var __assign = (undefined && undefined.__assign) || function () {
@@ -31,3 +29,2 @@ __assign = Object.assign || function(t) {
 };
-var compose = _rollupCompose__default || _rollupCompose;
 function useApolloFragment(fragment, id) {
@@ -37,3 +34,3 @@ var fragmentQuery = React.useMemo(function () { return createFragmentQuery(fragment); }, [
     ]);
-    var _a = reactApollo.useQuery(fragmentQuery.query, {
+    var _a = react.useQuery(fragmentQuery.query, {
         fetchPolicy: 'cache-only',
@@ -55,45 +52,17 @@ variables: {
 }
-function withApolloFragment(fragment, idPropName) {
-    if (idPropName === void 0) { idPropName = 'id'; }
-    var fragmentQuery = createFragmentQuery(fragment);
-    return compose(reactApollo.withApollo, reactApollo.graphql(fragmentQuery.query, {
-        options: function (props) {
-            return {
-                fetchPolicy: 'cache-only',
-                variables: {
-                    id: props[idPropName],
-                    __typename: fragmentQuery.fragmentTypeName,
+var fragmentCacheConfig = {
+    typePolicies: {
+        Query: {
+            fields: {
+                getFragment: function (_, _a) {
+                    var args = _a.args, toReference = _a.toReference;
+                    return toReference({
+                        id: args ? args.id : undefined,
+                        __typename: args ? args.__typename : undefined,
+                    });
                 },
-            };
+            },
         },
-        props: function (_a) {
-            var data = _a.data, _b = _a.ownProps, client = _b.client, ownProps = __rest(_b, ["client"]), rest = __rest(_a, ["data", "ownProps"]);
-            var fragmentData = data && data.getFragment;
-            if (!fragmentData) {
-                checkDataCompleteness({
-                    fragmentQuery: fragmentQuery,
-                    id: ownProps[idPropName],
-                    client: client,
-                });
-            }
-            return __assign({ data: fragmentData, ownProps: ownProps }, rest);
-        },
-    }));
-}
-function ApolloFragment(_a) {
-    var children = _a.children, fragment = _a.fragment, id = _a.id;
-    var fragmentQuery = createFragmentQuery(fragment);
-    return (React.createElement(reactApollo.Query, { fetchPolicy: "cache-only", query: fragmentQuery.query, variables: { id: id, __typename: fragmentQuery.fragmentTypeName } }, function (_a) {
-        var data = _a.data, client = _a.client, rest = __rest(_a, ["data", "client"]);
-        var fragmentData = data && data.getFragment;
-        if (!fragmentData) {
-            checkDataCompleteness({
-                fragmentQuery: fragmentQuery,
-                id: id,
-                client: client,
-            });
-        }
-        return children(__assign({ data: fragmentData || {}, client: client }, rest));
-    }));
-}
+    },
+};
 function createFragmentQuery(fragment) {
@@ -132,3 +101,3 @@ var _a = apolloFragmentUtils.getFragmentInfo(fragment), fragmentTypeName = _a.fragmentTypeName, fragmentName = _a.fragmentName;
     var dataWithoutTypename = __assign(__assign({}, fragmentData), { __typename: undefined });
-    var errorMessage = "\nUnable to resolve fragment fields for " + fragmentQuery.fragmentTypeName + ":" + id + ":\n" + fragmentQuery.fragmentSource.trimRight() + "\n\nAvailable data:\n" + JSON.stringify(dataWithoutTypename, null, 2) + "\n\nMake sure that the fields requested in the fragment are fetched by some query";
+    var errorMessage = "\nUnable to resolve fragment fields for ".concat(fragmentQuery.fragmentTypeName, ":").concat(id, ":\n").concat(fragmentQuery.fragmentSource.trimRight(), "\n\nAvailable data:\n").concat(JSON.stringify(dataWithoutTypename, null, 2), "\n\nMake sure that the fields requested in the fragment are fetched by some query");
     console.error(errorMessage);
@@ -138,4 +107,3 @@ }
 exports.useApolloFragment = useApolloFragment;
-exports.withApolloFragment = withApolloFragment;
-exports.ApolloFragment = ApolloFragment;
+exports.fragmentCacheConfig = fragmentCacheConfig;
 
@@ -142,0 +110,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

lib/index.d.ts

@@ -1,3 +0,3 @@
-import * as React from 'react';
-import { QueryResult } from 'react-apollo';
+import { InMemoryCacheConfig } from '@apollo/client';
+import { QueryResult } from '@apollo/client/react';
 import { DocumentNode } from 'graphql';
@@ -13,12 +13,3 @@ declare type FragmentQueryData<TData = any> = {
 export declare function useApolloFragment<TData = any>(fragment: SupportedFragment, id: string): ApolloFragmentResult<TData>;
-export declare function withApolloFragment(fragment: SupportedFragment, idPropName?: string): any;
-declare type ApolloFragmentChildrenData<TData = any> = Omit<ApolloFragmentResult<TData>, 'data'> & {
-    data: ApolloFragmentResult<TData>['data'] | {};
-};
-export declare type ApolloFragmentProps<TData = any> = {
-    id: string;
-    fragment: SupportedFragment;
-    children: (fragmentQueryResult: ApolloFragmentChildrenData<TData>) => React.ReactElement;
-};
-export declare function ApolloFragment<TData = any>({ children, fragment, id, }: ApolloFragmentProps<TData>): JSX.Element;
+export declare const fragmentCacheConfig: Required<Pick<InMemoryCacheConfig, 'typePolicies'>>;
 export {};

lib/index.js

@@ -24,7 +24,4 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
-import { Query, graphql, useQuery, withApollo, } from 'react-apollo';
+import { useQuery } from '@apollo/client/react';
 import { getFragmentInfo, buildFragmentQuery } from 'apollo-fragment-utils';
-import * as _compose from 'compose-tiny';
-import { default as _rollupCompose } from 'compose-tiny';
-var compose = _rollupCompose || _compose;
 export function useApolloFragment(fragment, id) {
@@ -51,45 +48,17 @@ var fragmentQuery = React.useMemo(function () { return createFragmentQuery(fragment); }, [
 }
-export function withApolloFragment(fragment, idPropName) {
-    if (idPropName === void 0) { idPropName = 'id'; }
-    var fragmentQuery = createFragmentQuery(fragment);
-    return compose(withApollo, graphql(fragmentQuery.query, {
-        options: function (props) {
-            return {
-                fetchPolicy: 'cache-only',
-                variables: {
-                    id: props[idPropName],
-                    __typename: fragmentQuery.fragmentTypeName,
+export var fragmentCacheConfig = {
+    typePolicies: {
+        Query: {
+            fields: {
+                getFragment: function (_, _a) {
+                    var args = _a.args, toReference = _a.toReference;
+                    return toReference({
+                        id: args ? args.id : undefined,
+                        __typename: args ? args.__typename : undefined,
+                    });
                 },
-            };
+            },
         },
-        props: function (_a) {
-            var data = _a.data, _b = _a.ownProps, client = _b.client, ownProps = __rest(_b, ["client"]), rest = __rest(_a, ["data", "ownProps"]);
-            var fragmentData = data && data.getFragment;
-            if (!fragmentData) {
-                checkDataCompleteness({
-                    fragmentQuery: fragmentQuery,
-                    id: ownProps[idPropName],
-                    client: client,
-                });
-            }
-            return __assign({ data: fragmentData, ownProps: ownProps }, rest);
-        },
-    }));
-}
-export function ApolloFragment(_a) {
-    var children = _a.children, fragment = _a.fragment, id = _a.id;
-    var fragmentQuery = createFragmentQuery(fragment);
-    return (React.createElement(Query, { fetchPolicy: "cache-only", query: fragmentQuery.query, variables: { id: id, __typename: fragmentQuery.fragmentTypeName } }, function (_a) {
-        var data = _a.data, client = _a.client, rest = __rest(_a, ["data", "client"]);
-        var fragmentData = data && data.getFragment;
-        if (!fragmentData) {
-            checkDataCompleteness({
-                fragmentQuery: fragmentQuery,
-                id: id,
-                client: client,
-            });
-        }
-        return children(__assign({ data: fragmentData || {}, client: client }, rest));
-    }));
-}
+    },
+};
 function createFragmentQuery(fragment) {
@@ -128,5 +97,5 @@ var _a = getFragmentInfo(fragment), fragmentTypeName = _a.fragmentTypeName, fragmentName = _a.fragmentName;
     var dataWithoutTypename = __assign(__assign({}, fragmentData), { __typename: undefined });
-    var errorMessage = "\nUnable to resolve fragment fields for " + fragmentQuery.fragmentTypeName + ":" + id + ":\n" + fragmentQuery.fragmentSource.trimRight() + "\n\nAvailable data:\n" + JSON.stringify(dataWithoutTypename, null, 2) + "\n\nMake sure that the fields requested in the fragment are fetched by some query";
+    var errorMessage = "\nUnable to resolve fragment fields for ".concat(fragmentQuery.fragmentTypeName, ":").concat(id, ":\n").concat(fragmentQuery.fragmentSource.trimRight(), "\n\nAvailable data:\n").concat(JSON.stringify(dataWithoutTypename, null, 2), "\n\nMake sure that the fields requested in the fragment are fetched by some query");
     console.error(errorMessage);
 }
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "apollo-fragment-react",
-  "version": "0.7.1",
-  "description": "A Query component to connect React components to GraphQL fragments",
+  "version": "1.0.0",
+  "description": "A React hook to connect React components to GraphQL fragments in Apollo Client cache",
   "author": "Abhi Aiyer <[e-mail]>",
@@ -45,10 +45,9 @@ "license": "MIT",
   "peerDependencies": {
-    "apollo-link-state": "0.4.1",
-    "react-apollo": "^3.0.0-beta.3"
+    "@apollo/client": "^3.5.6"
   },
   "devDependencies": {
+    "@apollo/client": "^3.5.6",
     "@types/graphql": "0.11.5",
     "@types/jest": "22.1.x",
     "apollo-cache-inmemory": "^1.1.5",
-    "apollo-client": "^2.2.0",
     "apollo-link": "^1.0.0",
@@ -68,3 +67,2 @@ "browserify": "14.5.0",
     "react": "^16.8.6",
-    "react-apollo": "^3.0.0-beta.3",
     "react-dom": "^16.8.6",
@@ -71,0 +69,0 @@ "rimraf": "2.6.1",

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

4

decreased by-20%

Dev dependency count

27

decreased by-3.57%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

21309

decreased by-27.39%

Lines of code

247

decreased by-22.33%

No dependency changes