I am trying to understand the Apollo client in an Angular client. The following code gives me no typings:
fireMutation() {
this.apollo.mutate<{foo: string}>({
mutation: gql`some mutation {}`,
variables: {}
}).subscribe(v => {
// No typings on v.
return;
});
}
I found this issue on Github, but it's apparently not related to the issue I'm facing.
I have created a Stackblitz here, to make it easy for you to confirm.
Based on this Github comment, I found the solution.
The fix was to install graphql types: npm i #types/graphql --save-dev.
I updated the stackblitz, and it now works 🔥
Many thanks to ekron.
Related
I have a problem with Strapi and Gatsby GraphiQL. I was deploy Strapi on Heroku, create a content type and try to fetch some data, but Gatsby GraphiQL didn't see images. Why it's happening? Where is my mistake?
{
resolve: "gatsby-source-strapi",
options: {
apiURL: "https://thawing-beyond-49749.herokuapp.com",
collectionTypes: [
"api/main-page-slides",
],
queryLimit: 1000,
},
},
gatsby-source-strapi is only compatible with v3, as you can see in the repository:
⚠️ This version of gatsby-source-strapi is only compatible with Strapi
v3 at the moment. We are currently working on a v4 compatible version.
That said, in the meantime, your only chance is to roll back to v3 and wait for a compatible plugin version, otherwise you won't be able to fetch the data properly.
you can simply get images data in strapi v4+ by following graphql query =>>
images{
data{
id
attributes{
url
}
}
}enter image description here
I'd like to render GraphQL Playground as a React component in one of my pages but it fails due to missing file-loader in webpack. Is there a way to fix this in docs or do I need to create new plugin with new webpack config?
Is it good idea to integrate Playground and Docusaurus at all?
Thanks for your ideas...
A few Docusaurus sites have embedded playgrounds:
Hermes
Uniforms
In your case you will have to write a plugin to extend the webpack config with file-loader.
Not sure if you found a better way but check out: https://www.npmjs.com/package/graphql-playground-react
You can embed this react component directly in your react app - It looks like Apollo also uses the vanilla JS version of this
I just had exactly the same problem. Basically, Docusaurus with a gQL Playground Integration runs fine in local but won't compile due to errors when running yarn build as above.
In the end I found the answer is in Docusaurus, not in building a custom compiler:
I switched from using graphql-react-playground to GraphiQL: package: "graphiql": "^1.8.7"
This moved my error on to a weird one with no references anywhere on the web (rare for me): "no valid fetcher implementation available"
I fixed the above by importing createGraphiQLFetcher from '#graphiql/create-fetcher' to my component
Then the error was around not being able to find a window component, this was an easy one, I followed docusaurus docs here: https://docusaurus.io/docs/docusaurus-core#browseronly and wrapped my component on this page in like this:
import BrowserOnly from '#docusaurus/BrowserOnly';
const Explorer = () => {
const { siteConfig } = useDocusaurusContext();
return (
<BrowserOnly fallback={Loading...}>
{() => {
const GraphEx = GraphExplorer
return
}}
);
}
This now works and builds successfully
I am trying to follow the apollo client installation instructions.
I'm copying exactly what they are doing into my project, but whenever I call client.query, I get a 400 status code with the following error:
Error: Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory.
This is all the code in my project's index.js:
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import gql from 'graphql-tag';
const client = new ApolloClient({
link: new HttpLink({ uri: 'https://q80vw8qjp.lp.gql.zone/graphql' }),
cache: new InMemoryCache()
});
client.query({ query: gql`{ hello }` }).then(console.log);
I've configured my babelrc file with the following option per the instructions in apollo's documentation:
{
"presets": ["env", "react"],
"plugins": [
"graphql-tag"
]
}
My project is just a basic webpack configuration with react. I've tried de-duping my npm packages, and checked if there are conflicting versions of graphql in my project but had no success. My best guess is that graphql-tag isn't working correctly and my query isn't being translated into the appropriate syntax for the request. It feels like I am missing something very basic. I would greatly appreciate any clarification. Thanks!
This doesn't look like an issue with your client config so much as a bug with Launchpad. If you access the GraphiQL interface for that endpoint and attempt to run a query, it'll throw the same error.
If you log into Launchpad with your Github account, you can start a new pad (which will be identical to that one), save it and then use that url in your project instead.
I'm trying to use express-stormpath on my Heroku app. I'm following the docs here, and my code is super simple:
var express = require('express');
var app = express();
var stormpath = require('express-stormpath');
app.use(stormpath.init(app, {
website: true
}));
app.on('stormpath.ready', function() {
app.listen(3000);
});
I've already looked at this question and followed the Heroku devcenter docs. The docs say that for an Heroku app, it's not necessary to pass in options, but I've still tried passing in options and nothing works. For example, I've tried this:
app.use(stormpath.init(app, {
// client: {
// file: './xxx.properties'
// },
client: {
apiKey: {
file: './xxx.properties',
id: process.env.STORMPATH_API_KEY_ID || 'xxx',
secret: process.env.STORMPATH_API_KEY_SECRET || 'xxx'
}
},
application: {
href: 'https://api.stormpath.com/v1/applications/blah'
},
}));
To try and see what's going on, I added a console.log line to the stormpath-config strategy valdiator to print the client object, and it gives me this:
{ file: './apiKey-xxx.properties',
id: 'xxx',
secret: 'xxx' }
{ file: null, id: null, secret: null }
Error: API key ID and secret is required.
Why is it getting called twice, and the second time around, why does the client object have null values for the file, id and secret?
When I run heroku config | grep STORMPATH, I get
STORMPATH_API_KEY_ID: xxxx
STORMPATH_API_KEY_SECRET: xxxx
STORMPATH_URL: https://api.stormpath.com/v1/applications/[myappurl]
I'm the original author of the express-stormpath library, and also wrote the Heroku documentation for Stormpath.
This is 100% my fault, and is a documentation / configuration bug on Stormpath's side of things.
Back in the day, all of our libraries looked for several environment variables by default:
STORMPATH_URL (your Application URL)
STORMPATH_API_KEY_ID
STORMPATH_API_KEY_SECRET
However, a while ago, we started upgrading our libraries, and realized that we wanted to go with a more standard approach across all of our supported languages / frameworks / etc. In order to make things more explicit, we essentially renamed the variables we look for by default, to:
STORMPATH_APPLICATION_HREF
STORMPATH_CLIENT_APIKEY_ID
STORMPATH_CLIENT_APIKEY_SECRET
Unfortunately, we did not yet update our Heroku integration or documentation to reflect these changes, which is why you just ran into this nasty issue.
I just submitted a ticket to our Engineering team to fix the names of the variables that our Heroku addon provisions by default to include our new ones, and I'm going to be updating our Heroku documentation later this afternoon to fix this for anyone else in the future.
I'm sincerely sorry about all the confusion / frustration. Sometimes these things slip through the cracks, and experiences like this make me realize we need better testing in place to catch this stuff earlier.
I'll be working on some changes internally to make sure we have a better process around rolling out updates like this one.
If you want a free Stormpath t-shirt, hit me up and I'll get one shipped out to you as a small way to say 'thanks' for putting up with the annoyance: randall#stormpath.com
After endless hours, I managed to finally get it working by removing the add-on entirely and re-installing it via the Heroku CLI and then exporting variables STORMPATH_CLIENT_APIKEY_ID and STORMPATH_CLIENT_APIKEY_SECRET. For some reason, installing it via the Heroku Dashboard causes express-stormpath to not find the apiKey and secret fields (even if you export variables).
I can't seem to find anything official about this: Does Parse.Config work on Parse Server? It used to work on Parse.com but when I try to migrate to Parse.Server, when trying the REST API it seem to fail:
GET http://localhost:1337/parse/config
Passing in my app ID. I read somewhere Config does not work on Parse Server, but wanted to confirm
Although is not officially supported as mentioned on the docs,there is a way to make it work. It is still an experimental implementation though.
As mentioned here & here, you should set the environment variable:
PARSE_EXPERIMENTAL_CONFIG_ENABLED=1
Then restart your node server. In case you deployed it on heroku for example you should on cli heroku restart -a <APP_NAME>
If that doesn't work I would suggest to simply add your route with your configuration options on your project's index.js file where express is initialized like so.
var parseConfig = {
"params": { /*...put your options here*/ }
};
// :one? is for old SDK compatibility while is optional parameter.
app.all('/parse/:one?/config', function (req, res) {
res.json(parseConfig);
});