Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@shopify/react-graphql

Package Overview
Dependencies
Maintainers
19
Versions
263
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@shopify/react-graphql - npm Package Compare versions

Comparing version 0.0.0-snapshot-20221206234925 to 0.0.0-snapshot-20230110221326

14

build/cjs/ApolloProvider.js

@@ -6,3 +6,3 @@ 'use strict';

var React = require('react');
var reactCommon = require('@apollo/react-common');
var client = require('@apollo/client');
var ApolloContext = require('./ApolloContext.js');

@@ -15,11 +15,11 @@

function ApolloProvider({
client,
client: client$1,
children
}) {
const providerValue = React__default["default"].useMemo(() => ({
client,
operations: client.__operations_cache__
}), [client]);
return /*#__PURE__*/React__default["default"].createElement(reactCommon.ApolloProvider, {
client: client
client: client$1,
operations: client$1.__operations_cache__
}), [client$1]);
return /*#__PURE__*/React__default["default"].createElement(client.ApolloProvider, {
client: client$1
}, /*#__PURE__*/React__default["default"].createElement(ApolloContext.ApolloContext.Provider, {

@@ -26,0 +26,0 @@ value: providerValue

43

build/cjs/hooks/query.js

@@ -6,3 +6,3 @@ 'use strict';

var React = require('react');
var apolloClient$1 = require('apollo-client');
var client = require('@apollo/client');
var isEqual = require('fast-deep-equal');

@@ -36,9 +36,9 @@ var reactEffect = require('@shopify/react-effect');

const variables = options.variables || {};
const client = apolloClient["default"](overrideClient);
const client$1 = apolloClient["default"](overrideClient);
if (typeof window === 'undefined') {
if (skip) {
return createDefaultResult(client, variables);
return createDefaultResult(client$1, variables);
} else if (!ssr || fetchPolicy === 'no-cache') {
return createDefaultResult(client, variables, undefined, true);
return createDefaultResult(client$1, variables, undefined, true);
}

@@ -71,4 +71,4 @@ }

return client.watchQuery(watchQueryOptions);
}, [client, skip, watchQueryOptions]);
return client$1.watchQuery(watchQueryOptions);
}, [client$1, skip, watchQueryOptions]);
reactEffect.useServerEffect(() => {

@@ -82,4 +82,4 @@ if (queryObservable == null) {

});
const defaultResult = React.useMemo(() => createDefaultResult(client, variables, queryObservable), // eslint-disable-next-line react-hooks/exhaustive-deps
[queryObservable, client, serializedVariables]);
const defaultResult = React.useMemo(() => createDefaultResult(client$1, variables, queryObservable), // eslint-disable-next-line react-hooks/exhaustive-deps
[queryObservable, client$1, serializedVariables]);
const [responseId, setResponseId] = React.useState(0);

@@ -101,4 +101,4 @@ React.useEffect(() => {

function invalidateErrorResult(error) {
const lastError = queryObservable.getLastError();
const lastResult = queryObservable.getLastResult();
// @ts-expect-error access last
const lastResult = queryObservable === null || queryObservable === void 0 ? void 0 : queryObservable.last;
unsubscribe();

@@ -110,6 +110,4 @@

} finally {
Object.assign(queryObservable || {}, {
lastError,
lastResult
});
// @ts-expect-error override last
queryObservable.last = lastResult;
}

@@ -130,4 +128,10 @@

function subscribe() {
subscription = queryObservable.subscribe(() => {
previousError = undefined;
subscription = queryObservable.subscribe(status => {
previousError = undefined; // apollo 3 calls this when 2 didn't prevent
// the extra render
if (currentResult.loading === status.loading && currentResult.networkStatus === status.networkStatus && status.partial) {
return;
}
invalidateCurrentResult();

@@ -148,3 +152,3 @@ }, error => {

subscribe();
return unsubscribe;
return unsubscribe; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [skip, queryObservable]);

@@ -179,5 +183,2 @@ const previousData = React.useRef(undefined);

data = (queryObservable.getLastResult() || {}).data;
} else if (Object.prototype.toString.call(result.data) === '[object Object]' && Object.keys(result.data).length === 0 && result.networkStatus === apolloClient$1.NetworkStatus.ready) {
// eslint-disable-next-line no-console
console.warn('The response payload was an empty object. This can happen if all your fields are contditional and they are all omitted');
} else if (fetchPolicy === 'no-cache' && (!result.data || Object.keys(result.data).length === 0)) {

@@ -191,3 +192,3 @@ data = previousData.current;

data,
error: hasError ? new apolloClient$1.ApolloError({
error: hasError ? new client.ApolloError({
graphQLErrors: result.errors

@@ -194,0 +195,0 @@ }) : result.error,

10

build/cjs/index.js

@@ -6,3 +6,3 @@ 'use strict';

var async = require('@shopify/async');
var apolloClient = require('apollo-client');
var client = require('@apollo/client');
var Query = require('./Query.js');

@@ -12,3 +12,3 @@ var Prefetch = require('./Prefetch.js');

var links = require('./links.js');
var apolloClient$1 = require('./hooks/apollo-client.js');
var apolloClient = require('./hooks/apollo-client.js');
var query$1 = require('./hooks/query.js');

@@ -28,7 +28,7 @@ var mutation = require('./hooks/mutation.js');

enumerable: true,
get: function () { return apolloClient.ApolloError; }
get: function () { return client.ApolloError; }
});
Object.defineProperty(exports, 'NetworkStatus', {
enumerable: true,
get: function () { return apolloClient.NetworkStatus; }
get: function () { return client.NetworkStatus; }
});

@@ -40,3 +40,3 @@ exports.Query = Query.Query;

exports.createSsrExtractableLink = links.createSsrExtractableLink;
exports.useApolloClient = apolloClient$1["default"];
exports.useApolloClient = apolloClient["default"];
exports.useQuery = query$1["default"];

@@ -43,0 +43,0 @@ exports.useMutation = mutation["default"];

4

build/cjs/links.js

@@ -5,3 +5,3 @@ 'use strict';

var apolloLink = require('apollo-link');
var client = require('@apollo/client');

@@ -11,3 +11,3 @@ function createSsrExtractableLink() {

}
class SsrExtractableLink extends apolloLink.ApolloLink {
class SsrExtractableLink extends client.ApolloLink {
constructor(...args) {

@@ -14,0 +14,0 @@ super(...args);

2

build/ts/ApolloContext.d.ts
import React from 'react';
import { ApolloClient } from 'apollo-client';
import { ApolloClient } from '@apollo/client';
import { DocumentNode } from 'graphql-typed';

@@ -4,0 +4,0 @@ export interface ApolloContextValue<CacheShape = any> {

2

build/ts/ApolloProvider.d.ts
import React from 'react';
import { ApolloClient } from 'apollo-client';
import { ApolloClient } from '@apollo/client';
export interface Props<CacheShape> {

@@ -4,0 +4,0 @@ readonly client: ApolloClient<CacheShape>;

2

build/ts/hooks/apollo-client.d.ts

@@ -1,3 +0,3 @@

import { ApolloClient } from 'apollo-client';
import { ApolloClient } from '@apollo/client';
export default function useApolloClient<CacheShape>(overrideClient?: ApolloClient<CacheShape>): ApolloClient<CacheShape>;
//# sourceMappingURL=apollo-client.d.ts.map

2

build/ts/hooks/background-query.d.ts
import { DocumentNode } from 'graphql-typed';
import { WatchQueryOptions } from 'apollo-client';
import { WatchQueryOptions } from '@apollo/client';
export declare function useBackgroundQuery(load: () => Promise<DocumentNode | null | Error>, options?: Omit<WatchQueryOptions, 'query'>): () => Promise<void>;
//# sourceMappingURL=background-query.d.ts.map

2

build/ts/hooks/graphql-document.d.ts

@@ -1,2 +0,2 @@

import { OperationVariables } from 'apollo-client';
import { OperationVariables } from '@apollo/client';
import { DocumentNode } from 'graphql-typed';

@@ -3,0 +3,0 @@ import { AsyncDocumentNode } from '../types';

2

build/ts/hooks/mutation.d.ts

@@ -1,2 +0,2 @@

import { OperationVariables } from 'apollo-client';
import { OperationVariables } from '@apollo/client';
import { DocumentNode } from 'graphql-typed';

@@ -3,0 +3,0 @@ import { NoInfer } from '@shopify/useful-types';

2

build/ts/hooks/query.d.ts

@@ -1,2 +0,2 @@

import { OperationVariables } from 'apollo-client';
import { OperationVariables } from '@apollo/client';
import { DocumentNode } from 'graphql-typed';

@@ -3,0 +3,0 @@ import { IfAllNullableKeys, NoInfer } from '@shopify/useful-types';

11

build/ts/hooks/types.d.ts

@@ -1,10 +0,9 @@

import { ApolloClient, MutationOptions as ClientMutationOptions } from 'apollo-client';
import { QueryResult, ExecutionResult, OperationVariables } from '@apollo/react-common';
import { QueryOptions, MutationOptions } from '@apollo/react-hooks';
import { ApolloClient, MutationOptions as ClientMutationOptions, QueryResult, OperationVariables, MutationOptions, FetchResult } from '@apollo/client';
import { QueryComponentOptions } from '@apollo/client/react/components';
import { IfAllNullableKeys } from '@shopify/useful-types';
import { VariableOptions } from '../types';
export declare type QueryHookOptions<Data = any, Variables = OperationVariables> = Omit<QueryOptions<Data, Variables>, 'query' | 'partialRefetch' | 'children' | 'variables'> & VariableOptions<Variables> & {
export declare type QueryHookOptions<Data = any, Variables = OperationVariables> = Omit<QueryComponentOptions<Data, Variables>, 'query' | 'partialRefetch' | 'children' | 'variables'> & VariableOptions<Variables> & {
skip?: boolean;
};
export interface QueryHookResult<Data, Variables> extends Omit<QueryResult<Data, Variables>, 'networkStatus' | 'variables'> {
export interface QueryHookResult<Data, Variables> extends Omit<QueryResult<Data, Variables>, 'networkStatus' | 'variables' | 'reobserve' | 'observable'> {
networkStatus: QueryResult<Data, Variables>['networkStatus'] | undefined;

@@ -20,3 +19,3 @@ variables: QueryResult<Data, Variables>['variables'] | undefined;

MutationHookOptions<Data, Variables>
]>) => Promise<ExecutionResult<Data>>;
]>) => Promise<FetchResult<Data>>;
//# sourceMappingURL=types.d.ts.map

2

build/ts/index.d.ts
export { DeferTiming } from '@shopify/async';
export { ApolloError, NetworkStatus } from 'apollo-client';
export { ApolloError, NetworkStatus } from '@apollo/client';
export { Query } from './Query';

@@ -4,0 +4,0 @@ export { Prefetch } from './Prefetch';

6

build/ts/links.d.ts

@@ -1,2 +0,2 @@

import { ApolloLink, Operation, NextLink } from 'apollo-link';
import { ApolloLink, Operation, NextLink } from '@apollo/client';
export declare function createSsrExtractableLink(): SsrExtractableLink;

@@ -6,6 +6,4 @@ export declare class SsrExtractableLink extends ApolloLink {

resolveAll<T>(then: () => T): Promise<T> | T;
request(operation: Operation, nextLink?: NextLink): import("apollo-link").Observable<import("apollo-link").FetchResult<{
[key: string]: any;
}, Record<string, any>, Record<string, any>>>;
request(operation: Operation, nextLink?: NextLink): import("zen-observable-ts").Observable<import("@apollo/client").FetchResult<Record<string, any>, Record<string, any>, Record<string, any>>>;
}
//# sourceMappingURL=links.d.ts.map

2

build/ts/Query.d.ts
/// <reference types="react" />
import { OperationVariables } from 'apollo-client';
import { OperationVariables } from '@apollo/client';
import { DocumentNode } from 'graphql-typed';

@@ -4,0 +4,0 @@ import { QueryHookResult, QueryHookOptions } from './hooks';

3

build/ts/types.d.ts
import React from 'react';
import { DocumentNode, GraphQLOperation, GraphQLData, GraphQLVariables, GraphQLDeepPartial } from 'graphql-typed';
import { QueryResult } from '@apollo/react-common';
import { ErrorPolicy, OperationVariables, ApolloError, ApolloClient, WatchQueryFetchPolicy } from 'apollo-client';
import { QueryResult, ErrorPolicy, OperationVariables, ApolloError, ApolloClient, WatchQueryFetchPolicy } from '@apollo/client';
import { IfEmptyObject, IfAllNullableKeys } from '@shopify/useful-types';

@@ -6,0 +5,0 @@ import { AsyncComponentType, AsyncHookTarget } from '@shopify/react-async';

8

package.json
{
"name": "@shopify/react-graphql",
"version": "0.0.0-snapshot-20221206234925",
"version": "0.0.0-snapshot-20230110221326",
"license": "MIT",

@@ -27,4 +27,3 @@ "description": "Tools for creating type-safe and asynchronous GraphQL components for React",

"dependencies": {
"@apollo/react-common": ">=3.0.0 <4.0.0",
"@apollo/react-hooks": ">=3.0.0 <4.0.0",
"@apollo/client": "^3.5.8",
"@shopify/async": "^4.0.1",

@@ -36,5 +35,2 @@ "@shopify/react-async": "^5.0.6",

"@shopify/useful-types": "^5.1.1",
"apollo-cache-inmemory": ">=1.0.0 <2.0.0",
"apollo-client": ">=2.0.0 <3.0.0",
"apollo-link": ">=1.0.0 <2.0.0",
"graphql-typed": "^2.0.1",

@@ -41,0 +37,0 @@ "fast-deep-equal": "^3.1.3"

10

README.md

@@ -17,3 +17,3 @@ # `@shopify/react-graphql`

This library builds on top of [react-apollo](https://github.com/apollographql/react-apollo). It provides alternatives to many of Apollo’s APIs, including `useQuery` and `useMutation`, to provide seamless and thorough type checking for query components whose types are generated by [`graphql-typescript-definitions`](https://github.com/Shopify/quilt/tree/main/packages/graphql-typescript-definitions). Additionally, it provides techniques for creating asynchronously loaded GraphQL queries that seamlessly interoperate with [`@shopify/react-async`’s](../react-async) `usePreload`, `usePrefetch`, and `useKeepFresh` APIs.
This library builds on top of [@apollo/client](https://github.com/apollographql/apollo-client). It provides alternatives to many of Apollo’s APIs, including `useQuery` and `useMutation`, to provide seamless and thorough type checking for query components whose types are generated by [`graphql-typescript-definitions`](https://github.com/Shopify/quilt/tree/main/packages/graphql-typescript-definitions). Additionally, it provides techniques for creating asynchronously loaded GraphQL queries that seamlessly interoperate with [`@shopify/react-async`’s](../react-async) `usePreload`, `usePrefetch`, and `useKeepFresh` APIs.

@@ -26,3 +26,3 @@ ### Prerequisites

Before using the hooks and other utilities provided by this package, you must wrap your application in an `ApolloProvider`. This provider should be used instead of `react-apollo`'s [`ApolloProvider`](https://www.apollographql.com/docs/react/api/react-apollo#ApolloProvider), and it accepts the same props as that component.
Before using the hooks and other utilities provided by this package, you must wrap your application in an `ApolloProvider`. This provider should be used instead of `@apollo/client`'s [`ApolloProvider`](https://www.apollographql.com/docs/react/api/react/hooks/#the-apolloprovider-component), and it accepts the same props as that component.

@@ -33,3 +33,3 @@ ```tsx

import {ApolloClient} from 'apollo-client';
import {ApolloClient} from '@apollo/client';
import {ApolloProvider} from '@shopify/react-graphql';

@@ -170,3 +170,3 @@

import React from 'react';
import gql from 'graphql-tag';
import {gql} from '@apollo/client';
import {useApolloClient} from '@shopify/react-graphql';

@@ -307,3 +307,3 @@ import {Button} from '@shopify/polaris';

react-apollo’s `Query` component is great, but does not have any built-in understanding of the connection between a GraphQL operation (provided in the `query` prop) and the data types of the resulting query. This library re-exports a `Query` component with improved typings. It will automatically read from from the types embedded in the query by `graphql-typescript-definitions` and use these as appropriate for the rest of the `Query` component’s props.
`@apollo/client`’s `Query` component is great, but does not have any built-in understanding of the connection between a GraphQL operation (provided in the `query` prop) and the data types of the resulting query. This library re-exports a `Query` component with improved typings. It will automatically read from from the types embedded in the query by `graphql-typescript-definitions` and use these as appropriate for the rest of the `Query` component’s props.

@@ -310,0 +310,0 @@ ```tsx

build/esm/ApolloProvider.mjs

Sorry, the diff of this file is not supported yet

build/esm/hooks/query.mjs

Sorry, the diff of this file is not supported yet

build/esm/index.mjs

Sorry, the diff of this file is not supported yet

build/esm/links.mjs

Sorry, the diff of this file is not supported yet

build/esnext/ApolloProvider.esnext

Sorry, the diff of this file is not supported yet

build/esnext/hooks/query.esnext

Sorry, the diff of this file is not supported yet

build/esnext/index.esnext

Sorry, the diff of this file is not supported yet

build/esnext/links.esnext

Sorry, the diff of this file is not supported yet

build/ts/ApolloContext.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/ApolloProvider.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/hooks/apollo-client.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/hooks/background-query.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/hooks/graphql-document.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/hooks/mutation.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/hooks/query.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/hooks/types.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/index.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/links.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/Query.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/types.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc