search

jaydenseric / apollo-upload-client

A terminating Apollo Link for Apollo Client that fetches a GraphQL multipart request if the GraphQL variables contain files (by default FileList, File, or Blob instances), or else fetches a regular GraphQL POST or GET request (depending on the config and GraphQL operation).
https://npm.im/apollo-upload-client
1.53k stars 156 forks source link

"Uncaught Error: Must contain a query definition" when apollo-client v2 + compose + client option #49

Closed github0013 closed 6 years ago

github0013 commented 6 years ago

localhost

environments

{
  "dependencies": {
    "@types/react": "^16.0.28",
    "@types/react-dom": "^16.0.3",
    "apollo-client-preset": "^1.0.5",
    "apollo-upload-client": "^7.0.0-alpha.1",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "graphql": "^0.12.3",
    "graphql-tag": "^2.6.1",
    "parcel-bundler": "1.2.1",
    "react": "^16.2.0",
    "react-apollo": "^2.0.4",
    "react-dom": "^16.2.0",
    "typescript": "^2.6.2"
  }
}

When I was trying to have a query and a mutation on a component, I encountered this error. Very simplified reproductive code is below.

class YourComponent extends React.Component<ChildProps<{}, QueryResponse & MutationResponse>, {}> {
  render() {
    console.log(this.props)
    return <div>from YourComponent</div>
  }
}

export default compose(
  graphql<QueryResponse>(QUERY),
  graphql<MutationResponse>(MUTATION, {
    options: props => ({
      client: uploadClient
    })
  })
)(YourComponent)
  1. you have compose to build your graphql
  2. you have a query + a mutation
  3. you set a client through the options variable on the mutation

If I remove options and use the client in ApolloProvider <ApolloProvider client={uploadClient}>, then it will remove the error.

export default compose(
  graphql<QueryResponse>(QUERY),
  graphql<MutationResponse>(MUTATION)
)(QueryAndMutation)

Is it maybe how I build graphql is irregular?

jaydenseric commented 6 years ago

If you downgrade to graphql@^0.11, does the problem go away? The Apollo ecosystem is still ironing out bugs with the new v0.12.

github0013 commented 6 years ago

tried "graphql": "^0.11" but then this time parcel gives build errors / runtime errors (tried 1.2.1 1.3.0 1.3.1), and I am sorry I am a webpack-phobic..

jaydenseric commented 6 years ago

What are the errors?

github0013 commented 6 years ago

Based on this package.json, I just changed parcel-bundler version.

{
  "dependencies": {
    "@types/react": "^16.0.28",
    "@types/react-dom": "^16.0.3",
    "apollo-client-preset": "^1.0.5",
    "apollo-upload-client": "^7.0.0-alpha.1",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "graphql": "^0.11",
    "graphql-tag": "^2.6.1",
    "parcel-bundler": "1.3.1",
    "react": "^16.2.0",
    "react-apollo": "^2.0.4",
    "react-dom": "^16.2.0",
    "typescript": "^2.6.2"
  }
}
1__yarn_run_parcel_src_index_html__node_

localhost_1234

1__yarn_run_parcel_src_index_html__node__and_aaa_and_listing_yahoo_shopping_store
jaydenseric commented 6 years ago

Parcel is pretty new and still ironing out kinks; just recently they added support for .mjs extension which may be important since we use it for our module entry.

There have been a few new releases of apollo-upload-client since this issue was filed too. If there is still an issue and you can determine a specific bug with apollo-upload-client we can re-open and investigate further 😊