search

relay-tools / react-relay-network-modern-ssr

SSR middleware for react-relay-network-modern
https://github.com/relay-tools/react-relay-network-modern-ssr
MIT License
67 stars 10 forks source link

fix: fix flow error #14

Closed HsuTing closed 5 years ago

HsuTing commented 5 years ago

I use react-relay-network-modern-ssr with flow@0.101.0 and I get error: 1.

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-relay-network-modern-ssr/node8/utils.js.flow:24:10

Cannot return JSON.stringify(...) because undefined [1] is incompatible with string [2].

     node_modules/react-relay-network-modern-ssr/node8/utils.js.flow
      21│ }
      22│
 [2]  23│ export function getCacheKey(queryID: string, variables: Object): string {
      24│   return JSON.stringify(stableCopy({ queryID, variables }));
      25│ }
      26│

     /private/tmp/flow/flowlib_3a473c68/core.js
 [1] 507│     ): string | void;

2.

Error ┈┈┈ path-to-client/client.js:29:9

Cannot call RelayNetworkLayer with array literal bound to middlewares because in array element:
 • Either a call signature declaring the expected parameter / return type is missing in MiddlewareSync [1] but exists
   in Middleware [2].
 • Or inexact RelayResponse [3] is incompatible with exact object type [4] in property subscribe.error of property
   execute.
 • Or RelayResponse [3] is incompatible with RelayResponse [5] in property subscribe.error of property execute.
 • Or RelayObservable [6] is incompatible with Promise [7] in property execute.
 • Or inexact RelayObservable [6] is incompatible with exact object type [4] in property execute.
 • Or RelayObservable [6] is incompatible with RelayResponse [5] in property execute.
 • Or a call signature declaring the expected parameter / return type is missing in MiddlewareSync [1] but exists in
   MiddlewareRaw [8].

        path-to-client/client.js
         21│
         22│     storeEnvironment = new Environment({
         23│       store,
         24│       network: new RelayNetworkLayer([
         25│         cacheMiddleware({
         26│           size: 100,
         27│           ttl: 60 * 1000,
         28│         }),
         29│         new RelaySSR(relayData).getMiddleware({
         30│           lookup: false,
         31│         }),
         32│         urlMiddleware({
         33│           url: (req: mixed) => 'http://localhost:8000/graphql',
         34│         }),
         35│       ]),
         36│     });
         37│
         38│     return storeEnvironment;

        node_modules/react-relay-network-modern-ssr/node8/client.js.flow
    [1]  23│   getMiddleware(opts?: RelayClientSSRMiddlewareOpts): MiddlewareSync {

        node_modules/react-relay-network-modern/lib/definition.js.flow
 [6][3]  23│   ) => ?ObservableFromValue<QueryPayload>,

        node_modules/react-relay-network-modern/node8/RelayNetworkLayer.js.flow
 [2][8]  33│     middlewares: Array<?Middleware | MiddlewareSync | MiddlewareRaw>,

        node_modules/react-relay-network-modern/node8/definition.js.flow
    [4]  96│   | {|
         97│       data?: ?PayloadData,
         98│       errors?: Array<any>,
         99│       rerunVariables?: Variables,
        100│     |}
    [5] 101│   | RelayResponse;
           :
    [7] 115│ export type ObservableFromValue<T> = RelayObservable<T> | Promise<T> | T;

3.

Error ┈┈ path-to-server/server.js:32:11

Cannot call RelayNetworkLayer with array literal bound to middlewares because in array element:
 • Either inexact Middleware [1] is incompatible with exact MiddlewareSync [2].
 • Or RelayRequest [3] is incompatible with RelayRequest [4] in the first argument of the first argument.
 • Or RelayRequest [3] is incompatible with RelayRequestBatch [5] in the first argument of the first argument.

        path-to-server/server.js
        25│       relaySSR,
        26│       environment: new Environment({
        27│         store,
        28│         network: new RelayNetworkLayer([
        29│           urlMiddleware({
        30│             url: (req: mixed) => 'http://localhost:8000/graphql',
        31│           }),
        32│           relaySSR.getMiddleware(),
        33│         ]),
        34│       }),
        35│     };
        36│   },

        node_modules/react-relay-network-modern-ssr/node8/server.js.flow
    [1] 33│   getMiddleware(args: SSRGraphQLArgs | (() => Promise<SSRGraphQLArgs>)): Middleware {

        node_modules/react-relay-network-modern/lib/definition.js.flow
    [3]  8│ export type MiddlewareNextFn = (req: RelayRequestAny) => Promise<RelayResponse>;

        node_modules/react-relay-network-modern/node8/RelayNetworkLayer.js.flow
    [2] 33│     middlewares: Array<?Middleware | MiddlewareSync | MiddlewareRaw>,

        node_modules/react-relay-network-modern/node8/definition.js.flow
 [4][5]  7│ export type RelayRequestAny = RelayRequest | RelayRequestBatch;

4.

Error ┈┈ path-to-server/server.js:32:20

Cannot call relaySSR.getMiddleware because:
 • Either inexact undefined [1] is incompatible with exact SSRGraphQLArgs [2].
 • Or undefined [1] is incompatible with function type [3].

        path-to-server/server.js
        29│           urlMiddleware({
        30│             url: (req: mixed) => 'http://localhost:8000/graphql',
        31│           }),
    [1] 32│           relaySSR.getMiddleware(),
        33│         ]),
        34│       }),
        35│     };

        node_modules/react-relay-network-modern-ssr/node8/server.js.flow
 [2][3] 33│   getMiddleware(args: SSRGraphQLArgs | (() => Promise<SSRGraphQLArgs>)): Middleware {

Example code:

HsuTing commented 5 years ago

I had fixed 1 and 4, but I do not have any idea to fix 2, 3. Can someone help me?

nodkz commented 5 years ago

@HsuTing I don't get any errors.

Can you please change new files in test/ folder proper examples with errors. Thanks.

HsuTing commented 5 years ago

@nodkz I add a new example about how I use react-relay-network-modern-ssr. I get error like this:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ test/example/client.js:30:9

Cannot call RelayNetworkLayer with array literal bound to middlewares because in array element:
 • Either a call signature declaring the expected parameter / return type is missing in MiddlewareSync [1] but exists
   in Middleware [2].
 • Or inexact RelayResponse [3] is incompatible with exact object type [4] in property subscribe.error of property
   execute.
 • Or RelayResponse [3] is incompatible with RelayResponse [5] in property subscribe.error of property execute.
 • Or RelayObservable [6] is incompatible with Promise [7] in property execute.
 • Or inexact RelayObservable [6] is incompatible with exact object type [4] in property execute.
 • Or RelayObservable [6] is incompatible with RelayResponse [5] in property execute.
 • Or a call signature declaring the expected parameter / return type is missing in MiddlewareSync [1] but exists in
   MiddlewareRaw [8].

        test/example/client.js
         22│
         23│     storeEnvironment = new Environment({
         24│       store,
         25│       network: new RelayNetworkLayer([
         26│         cacheMiddleware({
         27│           size: 100,
         28│           ttl: 60 * 1000,
         29│         }),
         30│         new RelaySSR(relayData).getMiddleware({
         31│           lookup: false,
         32│         }),
         33│         urlMiddleware({
         34│           url: (req: mixed) => 'http://localhost:8000/graphql',
         35│         }),
         36│       ]),
         37│     });
         38│
         39│     return storeEnvironment;

        node_modules/react-relay-network-modern/lib/definition.js.flow
 [6][3]  23│   ) => ?ObservableFromValue<QueryPayload>,

        node_modules/react-relay-network-modern/node8/RelayNetworkLayer.js.flow
 [2][8]  33│     middlewares: Array<?Middleware | MiddlewareSync | MiddlewareRaw>,

        node_modules/react-relay-network-modern/node8/definition.js.flow
    [4]  96│   | {|
         97│       data?: ?PayloadData,
         98│       errors?: Array<any>,
         99│       rerunVariables?: Variables,
        100│     |}
    [5] 101│   | RelayResponse;
           :
    [7] 115│ export type ObservableFromValue<T> = RelayObservable<T> | Promise<T> | T;

        src/client.js
    [1]  23│   getMiddleware(opts?: RelayClientSSRMiddlewareOpts): MiddlewareSync {

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ test/example/server.js:33:11

Cannot call RelayNetworkLayer with array literal bound to middlewares because in array element:
 • Either inexact Middleware [1] is incompatible with exact MiddlewareSync [2].
 • Or RelayRequest [3] is incompatible with RelayRequest [4] in the first argument of the first argument.
 • Or RelayRequest [3] is incompatible with RelayRequestBatch [5] in the first argument of the first argument.

        test/example/server.js
        26│       relaySSR,
        27│       environment: new Environment({
        28│         store,
        29│         network: new RelayNetworkLayer([
        30│           urlMiddleware({
        31│             url: (req: mixed) => 'http://localhost:8000/graphql',
        32│           }),
        33│           relaySSR.getMiddleware(),
        34│         ]),
        35│       }),
        36│     };
        37│   },

        node_modules/react-relay-network-modern/lib/definition.js.flow
    [3]  8│ export type MiddlewareNextFn = (req: RelayRequestAny) => Promise<RelayResponse>;

        node_modules/react-relay-network-modern/node8/RelayNetworkLayer.js.flow
    [2] 33│     middlewares: Array<?Middleware | MiddlewareSync | MiddlewareRaw>,

        node_modules/react-relay-network-modern/node8/definition.js.flow
 [4][5]  7│ export type RelayRequestAny = RelayRequest | RelayRequestBatch;

        src/server.js
    [1] 33│   getMiddleware(args?: SSRGraphQLArgs | (() => Promise<SSRGraphQLArgs>)): Middleware {
nodkz commented 5 years ago

The problem that you are using react-relay-network-modern/node8 with react-relay-network-modern-ssr which under the hood uses react-relay-network-modern/lib/definitions.js.flow.

So need to fix somehow react-relay-network-modern where {node8,mjs,es}/definitions.js.flow will re-export definitions from react-relay-network-modern/lib/definitions.js.flow. In such case, all typedefs will be the same and no flow errors occur.

You may try to remove in your example /node8 from imports. After that flow will not throw errors.

HsuTing commented 5 years ago

@nodkz That work. So, we should not use react-relay-network-modern-ssr/node8? Maybe we need to modify build-node8 to fix the flow files?

nodkz commented 5 years ago

Better to fix build-node8. Can you fix it?

HsuTing commented 5 years ago

I use react-relay-network-modern-ssr with flow@0.101.0 and I get error: 1.

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-relay-network-modern-ssr/node8/utils.js.flow:24:10

Cannot return JSON.stringify(...) because undefined [1] is incompatible with string [2].

     node_modules/react-relay-network-modern-ssr/node8/utils.js.flow
      21│ }
      22│
 [2]  23│ export function getCacheKey(queryID: string, variables: Object): string {
      24│   return JSON.stringify(stableCopy({ queryID, variables }));
      25│ }
      26│

     /private/tmp/flow/flowlib_3a473c68/core.js
 [1] 507│     ): string | void;
Error ┈┈┈ path-to-client/client.js:29:9

Cannot call RelayNetworkLayer with array literal bound to middlewares because in array element:
 • Either a call signature declaring the expected parameter / return type is missing in MiddlewareSync [1] but exists
   in Middleware [2].
 • Or inexact RelayResponse [3] is incompatible with exact object type [4] in property subscribe.error of property
   execute.
 • Or RelayResponse [3] is incompatible with RelayResponse [5] in property subscribe.error of property execute.
 • Or RelayObservable [6] is incompatible with Promise [7] in property execute.
 • Or inexact RelayObservable [6] is incompatible with exact object type [4] in property execute.
 • Or RelayObservable [6] is incompatible with RelayResponse [5] in property execute.
 • Or a call signature declaring the expected parameter / return type is missing in MiddlewareSync [1] but exists in
   MiddlewareRaw [8].

        path-to-client/client.js
         21│
         22│     storeEnvironment = new Environment({
         23│       store,
         24│       network: new RelayNetworkLayer([
         25│         cacheMiddleware({
         26│           size: 100,
         27│           ttl: 60 * 1000,
         28│         }),
         29│         new RelaySSR(relayData).getMiddleware({
         30│           lookup: false,
         31│         }),
         32│         urlMiddleware({
         33│           url: (req: mixed) => 'http://localhost:8000/graphql',
         34│         }),
         35│       ]),
         36│     });
         37│
         38│     return storeEnvironment;

        node_modules/react-relay-network-modern-ssr/node8/client.js.flow
    [1]  23│   getMiddleware(opts?: RelayClientSSRMiddlewareOpts): MiddlewareSync {

        node_modules/react-relay-network-modern/lib/definition.js.flow
 [6][3]  23│   ) => ?ObservableFromValue<QueryPayload>,

        node_modules/react-relay-network-modern/node8/RelayNetworkLayer.js.flow
 [2][8]  33│     middlewares: Array<?Middleware | MiddlewareSync | MiddlewareRaw>,

        node_modules/react-relay-network-modern/node8/definition.js.flow
    [4]  96│   | {|
         97│       data?: ?PayloadData,
         98│       errors?: Array<any>,
         99│       rerunVariables?: Variables,
        100│     |}
    [5] 101│   | RelayResponse;
           :
    [7] 115│ export type ObservableFromValue<T> = RelayObservable<T> | Promise<T> | T;
Error ┈┈ path-to-server/server.js:32:11

Cannot call RelayNetworkLayer with array literal bound to middlewares because in array element:
 • Either inexact Middleware [1] is incompatible with exact MiddlewareSync [2].
 • Or RelayRequest [3] is incompatible with RelayRequest [4] in the first argument of the first argument.
 • Or RelayRequest [3] is incompatible with RelayRequestBatch [5] in the first argument of the first argument.

        path-to-server/server.js
        25│       relaySSR,
        26│       environment: new Environment({
        27│         store,
        28│         network: new RelayNetworkLayer([
        29│           urlMiddleware({
        30│             url: (req: mixed) => 'http://localhost:8000/graphql',
        31│           }),
        32│           relaySSR.getMiddleware(),
        33│         ]),
        34│       }),
        35│     };
        36│   },

        node_modules/react-relay-network-modern-ssr/node8/server.js.flow
    [1] 33│   getMiddleware(args: SSRGraphQLArgs | (() => Promise<SSRGraphQLArgs>)): Middleware {

        node_modules/react-relay-network-modern/lib/definition.js.flow
    [3]  8│ export type MiddlewareNextFn = (req: RelayRequestAny) => Promise<RelayResponse>;

        node_modules/react-relay-network-modern/node8/RelayNetworkLayer.js.flow
    [2] 33│     middlewares: Array<?Middleware | MiddlewareSync | MiddlewareRaw>,

        node_modules/react-relay-network-modern/node8/definition.js.flow
 [4][5]  7│ export type RelayRequestAny = RelayRequest | RelayRequestBatch;
Error ┈┈ path-to-server/server.js:32:20

Cannot call relaySSR.getMiddleware because:
 • Either inexact undefined [1] is incompatible with exact SSRGraphQLArgs [2].
 • Or undefined [1] is incompatible with function type [3].

        path-to-server/server.js
        29│           urlMiddleware({
        30│             url: (req: mixed) => 'http://localhost:8000/graphql',
        31│           }),
    [1] 32│           relaySSR.getMiddleware(),
        33│         ]),
        34│       }),
        35│     };

        node_modules/react-relay-network-modern-ssr/node8/server.js.flow
 [2][3] 33│   getMiddleware(args: SSRGraphQLArgs | (() => Promise<SSRGraphQLArgs>)): Middleware {

Example code:

  • server.js
...
      new Environment({
        store,
        network: new RelayNetworkLayer([
          urlMiddleware({
            url: (req: mixed) => 'http://localhost:8000/graphql',
          }), 
          relaySSR.getMiddleware(),
        ]), 
      })
...
  • client.js
...
    new Environment({
      store,
      network: new RelayNetworkLayer([
        cacheMiddleware({
          size: 100,
          ttl: 60 * 1000,
        }), 
        new RelaySSR(relayData).getMiddleware({
          lookup: false,
        }), 
        urlMiddleware({
          url: (req: mixed) => 'http://localhost:8000/graphql',
        }), 
      ]), 
    });
...

@nodkz I think we can fix 1 and 4 error at this pr. When flow has the more better way to fix the other problems, I will fix those problems in the other pr.

nodkz commented 5 years ago

Thanks a lot! 🙏

nodkz commented 5 years ago

:tada: This PR is included in version 1.2.4 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

HsuTing commented 5 years ago

@nodkz Thank for your help 👍 .