Graphql-tools: Working example of getting typeDefs/schema from introspection?

[acomito]

I've tried following this tutorial:

https://www.robinwieruch.de/graphql-server-mock-apollo-client/

But I'm just getting "schema.getDirectives is not a function"

I see the docs, https://graphql.org/learn/introspection/, but they're not particularly actionable or helpful.

I also saw this: https://www.apollographql.com/docs/graphql-tools/remote-schemas.html#link but couldn't get a hello world working.

Does anyone have a working example of this? My intention is to use the typeDefs for mocking client-side in storybook.

Also, using CRA.

{
  "dependencies": {
    "@material-ui/core": "^1.4.3",
    "@nivo/bar": "^0.42.1",
    "@nivo/line": "^0.42.1",
    "@nivo/pie": "^0.42.1",
    "@storybook/addon-viewport": "^3.4.10",
    "ajv": "^6.5.1",
    "isomorphic-fetch": "^2.2.1",
    "joi": "^13.5.2",
    "npm": "^6.1.0",
    "postcss-html": "^0.30.0",
    "postcss-markdown": "^0.30.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-apollo": "^2.1.9",
    "react-dom": "^16.4.1",
    "react-lottie": "^1.2.3",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^1.1.4",
    "react-toggle-display": "^2.2.0",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.4.10",
    "@storybook/addon-info": "^3.4.10",
    "@storybook/addon-knobs": "^3.4.10",
    "@storybook/addon-links": "^3.4.10",
    "@storybook/react": "^3.4.10",
    "apollo-cache-inmemory": "^1.3.0-beta.6",
    "apollo-client": "^2.3.7",
    "apollo-link": "^1.2.2",
    "apollo-link-http": "^1.5.4",
    "apollo-link-schema": "^1.1.0",
    "apollo-storybook-react": "^0.1.5",
    "babel-eslint": "^8.2.6",
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
    "color": "^3.0.0",
    "cross-fetch": "^2.2.1",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "17.0.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.9.1",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "graphql-tools": "^3.1.1",
    "luxon": "^1.3.0",
    "postcss-syntax": "^0.3.1",
    "query-string": "5",
    "react-app-rewire-styled-components": "^3.0.2",
    "react-app-rewired": "^1.5.2",
    "react-slick": "^0.23.1",
    "react-styled-flexboxgrid": "^2.4.0",
    "react-window-size": "^1.2.0",
    "recompose": "^0.28.0",
    "storybook-react-router": "^1.0.1",
    "styled-components": "^3.3.3",
    "styled-normalize": "^4.0.0",
    "stylelint": "^9.3.0",
    "stylelint-config-recommended": "^2.1.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.3.1"
  }
  }
}

[stubailo]

Try this blog post? https://blog.apollographql.com/three-ways-to-represent-your-graphql-schema-a41f4175100d

I think you want "Introspection query result to GraphQLSchema object"

[gilesbradshaw]

@acomito introspectSchema is asynchronous - it returns a promise.

robin's code is wrong he has 👍

````js
const schema = introspectSchema(httpLink);

const executableSchema = makeExecutableSchema({
typeDefs: printSchema(schema),
resolvers,
});

const client = new ApolloClient({
link: new SchemaLink({ schema: executableSchema }),
cache,
});

ReactDOM.render(

,
document.getElementById('root'),
);

````

but it should be something like

````js
introspectSchema(httpLink).then(
schema =>
const executableSchema = makeExecutableSchema({
typeDefs: printSchema(schema),
resolvers,
});

const client = new ApolloClient({
  link: new SchemaLink({ schema: executableSchema }),
  cache,
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root'),
);

)

````

(will post more if above code also has problems)

[acomito]

Thanks everyone for taking the time out to provide some insight.

[rwieruch]

@gilesbradshaw in the tutorial, it is used asynchronously as well with async/await:

async function render() {
  const cache = new InMemoryCache();

  const GITHUB_BASE_URL = 'https://api.github.com/graphql';

  const httpLink = ...

  const schema = await introspectSchema(httpLink);

  const executableSchema = ...

  const client = ...

  ReactDOM.render(
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>,
    document.getElementById('root'),
  );
}

render();

Anything I am missing?

[gilesbradshaw]

@rwieruch ah so it is I only got as far as ..

const schema = introspectSchema(httpLink);
I suspect @acomito used that code as well as it would have given the error he mentioned - basically no getDirectives function on the promise returned by introspectSchema

[rwieruch]

@gilesbradshaw oh no. Did you read the same tutorial? Maybe I should adjust the code snippets a bit 😄

[gilesbradshaw]

@rwieruch I'd imagine it was just laziness on my part :) No aspersions intentionally casted :P