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 7.2.0-apollo-3-beta.2 to 7.2.0

14

build/cjs/ApolloProvider.js

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

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

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

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

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

30

build/cjs/hooks/query.js

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

var React = require('react');
var client = require('@apollo/client');
var apolloClient$1 = require('apollo-client');
var reactEffect = require('@shopify/react-effect');

@@ -26,6 +26,6 @@ var apolloClient = require('./apollo-client.js');

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

@@ -57,4 +57,4 @@

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

@@ -68,5 +68,5 @@ if (queryObservable == null) {

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

@@ -77,6 +77,4 @@ if (skip || !queryObservable) {

const invalidateCurrentResult = ({
loading
}) => {
setIsLoading(loading);
const invalidateCurrentResult = () => {
setResponseId(x => x + 1);
};

@@ -111,3 +109,3 @@

if (isLoading) {
if (result.loading) {
data = previousData.current || result && result.data ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, previousData.current || {}), result && result.data || {}) : undefined;

@@ -124,3 +122,3 @@ } else if (hasError) {

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

@@ -130,4 +128,4 @@ }) : result.error,

loading: result.loading
});
}, [isLoading, skip, queryObservable, defaultResult, previousData]);
}); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [responseId, skip, queryObservable, defaultResult, previousData]);
return currentResult;

@@ -134,0 +132,0 @@ }

6

build/cjs/links.js

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

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

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

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

@@ -39,3 +39,3 @@ super(...args);

this.operations.add(promise);
return new client.Observable(observer => {
return new apolloLink.Observable(observer => {
return nextLink(operation).subscribe({

@@ -42,0 +42,0 @@ complete() {

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';

14

build/ts/hooks/types.d.ts

@@ -1,14 +0,12 @@

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

@@ -22,3 +20,3 @@ export declare type MutationHookOptions<Data = any, Variables = OperationVariables> = Omit<MutationOptions<Data, Variables>, 'variables' | 'mutation' | 'fetchPolicy'> & VariableOptions<Variables> & Pick<ClientMutationOptions<Data, Variables>, 'fetchPolicy'> & {

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

2

build/ts/index.d.ts

@@ -6,3 +6,3 @@ export { DeferTiming } from '@shopify/async';

export { createAsyncQueryComponent, createAsyncQuery } from './async';
export type { AsyncQueryComponentType, GraphQLData, GraphQLVariables, GraphQLDeepPartial, QueryProps, } from './types';
export type { AsyncQueryComponentType, GraphQLData, GraphQLVariables, GraphQLDeepPartial, QueryProps, NetworkStatus, } from './types';
export { ApolloProvider } from './ApolloProvider';

@@ -9,0 +9,0 @@ export { createSsrExtractableLink, SsrExtractableLink } from './links';

6

build/ts/links.d.ts

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

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

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

resolveAll<T>(then: () => T): Promise<T> | T;
request(operation: Operation, nextLink?: NextLink): Observable<FetchResult<Record<string, any>, Record<string, any>, Record<string, any>>>;
request(operation: Operation, nextLink?: NextLink): Observable<FetchResult<{
[key: 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 { ErrorPolicy, OperationVariables, ApolloError, ApolloClient, WatchQueryFetchPolicy, NetworkStatus, QueryResult } from '@apollo/client';
import { QueryResult } from '@apollo/react-common';
import { ErrorPolicy, OperationVariables, ApolloError, ApolloClient, WatchQueryFetchPolicy, NetworkStatus } from 'apollo-client';
import { IfEmptyObject, IfAllNullableKeys } from '@shopify/useful-types';

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

20

package.json
{
"name": "@shopify/react-graphql",
"version": "7.2.0-apollo-3-beta.2",
"version": "7.2.0",
"license": "MIT",

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

"dependencies": {
"@apollo/client": "^3.5.10",
"@apollo/react-common": ">=3.0.0 <4.0.0",
"@apollo/react-hooks": ">=3.0.0 <4.0.0",
"@shopify/async": "^3.1.5",
"@shopify/react-async": "^4.1.23",
"@shopify/react-async": "^4.1.24",
"@shopify/react-effect": "^4.1.12",
"@shopify/react-hooks": "^2.1.18",
"@shopify/react-idle": "^2.1.13",
"@shopify/useful-types": "^4.0.2",
"@shopify/react-hooks": "^2.1.19",
"@shopify/react-idle": "^2.1.14",
"@shopify/useful-types": "^4.0.3",
"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": "^1.1.5"
},
"devDependencies": {
"@shopify/react-testing": "^3.3.9"
"@shopify/react-testing": "^3.3.10"
},

@@ -61,3 +65,3 @@ "files": [

},
"gitHead": "2cb2821b34c4929a42467c21a9ce9c3487c60d89"
"gitHead": "c2d1591178ba2f54775299a8038497348c955e0b"
}

10

README.md

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

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.
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.

@@ -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 `@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.
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.

@@ -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 '@apollo/client';
import gql from 'graphql-tag';
import {useApolloClient} from '@shopify/react-graphql';

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

@apollo/client’s [Query](https://www.apollographql.com/docs/react/api/react/components/#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.
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.

@@ -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/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/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