Thinkmill / ts-gql

Write GraphQL queries with a gql tag in TypeScript -> have generated types

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Would like to use this with storybook-addon-apollo-client

airtonix opened this issue · comments

Would let us mock out the responses of Network Layer Container components

https://www.npmjs.com/package/storybook-addon-apollo-client

  • I ran through all the required setup for the addon,
  • Our GQL guys gave me a schema.graphql to put in our frontend project
  • I setup one of the stories that ends up loading a Network Layer Component with a query created with gql from @ts-gql/tag
  • it spits out this error:
Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? http://docs.apollostack.com/apollo-client/core.html#gql
Invariant Violation: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? http://docs.apollostack.com/apollo-client/core.html#gql
    at new InvariantError (http://localhost:6006/vendors~main.iframe.bundle.js:163217:28)
    at invariant (http://localhost:6006/vendors~main.iframe.bundle.js:163229:15)
    at checkDocument (http://localhost:6006/vendors~main.iframe.bundle.js:5447:96)
    at removeConnectionDirectiveFromDocument (http://localhost:6006/vendors~main.iframe.bundle.js:5903:143)
    at MockLink.push.../../node_modules/.pnpm/@apollo/client@3.1.1_graphql@14.6.0+react@16.13.1/node_modules/@apollo/client/utilities/testing/mocking/mockLink.js.MockLink.normalizeMockedResponse (http://localhost:6006/vendors~main.iframe.bundle.js:6776:133)
    at MockLink.push.../../node_modules/.pnpm/@apollo/client@3.1.1_graphql@14.6.0+react@16.13.1/node_modules/@apollo/client/utilities/testing/mocking/mockLink.js.MockLink.addMockedResponse (http://localhost:6006/vendors~main.iframe.bundle.js:6719:45)
    at http://localhost:6006/vendors~main.iframe.bundle.js:6713:23
    at Array.forEach (<anonymous>)
    at new MockLink (http://localhost:6006/vendors~main.iframe.bundle.js:6712:29)
    at new MockedProvider (http://localhost:6006/vendors~main.iframe.bundle.js:6622:27)

If I instead use the import { gql } from '@apollo/client'; to write the queries, then it doesn't crash and burn, but obviously there's no type safety on our query results :(

looking at your README.md there's this :

@ts-gql/apollo only exposes a subset of @apollo/client's functionality. For example, it doesn't expose useLazyQuery because we recommend using useApolloClient().query instead. If you disagree with some of the decisions that @ts-gql/apollo makes, you can use ts-gql but write your own type definitions for Apollo or another GraphQL client.

Confused? are you essentially telling anyone who wants a bit more out of the @ts-gql/apollo exports to go away ?

I think I need @ts-gql/client/testing exported also.

With the change to use @graphql-typed-document-node/core, you can now use @apollo/client/testing and it will work with ts-gql's queries.