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
18
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.1.25 to 7.2.0-apollo-3-beta.1

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

16

build/cjs/hooks/query.js

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

var React = require('react');
var apolloClient$1 = require('apollo-client');
var client = 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 = apolloClient["default"](overrideClient);
const client$1 = apolloClient["default"](overrideClient);
if (typeof window === 'undefined' && (skip || fetchPolicy === 'no-cache' || !ssr)) {
return createDefaultResult(client, variables);
return createDefaultResult(client$1, variables);
}

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

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

@@ -68,4 +68,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);

@@ -120,3 +120,3 @@ React.useEffect(() => {

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

@@ -123,0 +123,0 @@ }) : result.error,

6

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) {

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

this.operations.add(promise);
return new apolloLink.Observable(observer => {
return new client.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,12 +0,14 @@

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, FetchResult, MutationOptions, NormalizedCacheObject, OperationVariables, QueryOptions, WatchQueryFetchPolicy } from '@apollo/client';
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<QueryOptions<Data, Variables>, 'query' | 'partialRefetch' | 'variables' | 'fetchPolicy'> & VariableOptions<Variables> & {
client?: ApolloClient<NormalizedCacheObject>;
fetchPolicy?: WatchQueryFetchPolicy;
skip?: boolean;
ssr?: 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' | 'called'> {
networkStatus: QueryResult<Data, Variables>['networkStatus'] | undefined;
variables: QueryResult<Data, Variables>['variables'] | undefined;
called: QueryResult<Data, Variables>['called'] | false;
}

@@ -20,3 +22,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<ExecutionResult<Data>>;
]>) => Promise<FetchResult<Data>>;
//# sourceMappingURL=types.d.ts.map

6

build/ts/links.d.ts

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

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

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

10

package.json
{
"name": "@shopify/react-graphql",
"version": "7.1.25",
"version": "7.2.0-apollo-3-beta.1",
"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.10",
"@shopify/async": "^3.1.5",

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

"@shopify/useful-types": "^4.0.2",
"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"

@@ -66,3 +62,3 @@ },

},
"gitHead": "310df2bc167685cf0c4529340642da3e85fbb5d4"
"gitHead": "a4e75863e038e9f1f44f55193dbdbde7568070ee"
}

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

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