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
Related
I am a beginner with using Gatsby and graphcms. Fetching data from cms with gatsby development environment is fine, everything good. I have deployed my website on Netlify, when add some new content via cms content is not updating, not fetching.
Component which need content from cms:
import React from "react"
import { StaticQuery, graphql } from "gatsby"
import ServicesMobileProduct from "./ServicesMobileProduct"
const ProductsMobile = () => (
<StaticQuery
query={graphql`
{
product {
products {
id
productName
description
price
amount
}
}
}
`}
render={({ product: { products } }) => (
<>
{products.map(({ productName, description, price, amount, id }) => (
<ServicesMobileProduct
key={id}
productName={productName}
description={description}
price={price}
amount={amount}
/>
))}
</>
)}
/>
)
export default ProductsMobile
Gatsby is a static site generator, this means that in the build/develop time it gathers all data from CMS, markdown, JSON, or other data sources and creates the public HTML output in /public folder. More or less following this simplified schema:
Generally, once the site is built, you need to redeploy it to update, create, or delete content because the site is not updated with these CMS new changes.
What you are trying to achieve is called webhook. A webhook is a way for an application to notify another application when a new event has occurred in real-time such us a creation, deletion, or modification of the content from a source.
In Gatsby, some sources (like DatoCMS) exposes a webhook, but this only works under development mode. Any CMS change will trigger a gatsby develop command to refresh the content. Of course, it's extremely not recommended to upload a site live in gatsby develop mode only to achieve an automated refresh.
In build mode, the idea is quite similar but instead of running a gatsby develop command, you will need to trigger a gatsby build + deploy. If you are using any continuous deployment tool (CD), such as Netlify, you can easily achieve this. If you are using a continuous integration (CI) tool, such as Jenkins, you need to configure a pipeline to achieve it.
Another way to achieve what you want is to create an asynchronous JavaScript request to an external API or data source that populates your application with the content. This will work in any environment but you will lose all the SEO potential (and other) that Gatsby brings.
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 integrated the prismic.io headless cms into my vuetify project and have been able to render content from key text fields I created in my prismic repository into the project, but I haven't been able to load images. When I view the page in a browser I get the following console error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
--->
at /Users/jbdebiasio/dev/prismic-vue/src/components/Image.vue
When I view the image with inspect element it shows the following markup:
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
What does this mean and what do I need to do to render images properly? I tried updating my app instance but observed no changes.
My company recently ran into the same issue, and it's because of the way the Prismic Vue package is built.
It's caused by Prismic not using render functions, and instead requires the template compiler to build their components at runtime.
You're going to need to add the full build of Vue, which includes the template compiler
The following example works if the project was made with the Vue CLI
// vue.config.js
module.exports = {
// Will merge all properties with the default web pack config
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}
}
More info on this here
Vue CLI config here here
This solution is obviously just a bandaid, and the real problem needs to be addressed by Prismic. See this pull request.
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.
I'm trying to get Fine Uploader React to work but keep running into issues.
I'm getting the following errors:
Here's the URL: http://fineuploader.azurewebsites.net/
Here's what I've done so far:
Downloaded the source on to my computer from https://github.com/FineUploader/react-fine-uploader
I then npm installed react-fine-uploader and fine-uploader as per instructions
I ran webpack to transpile and bundle the code
Added an entry point and index.html
Finally, I simply published the app to a new Azure app/website
Any idea what's causing the issue?
P.S. My goal is to use Fine Uploader to upload files to Azure Blob Storage. At this point, I'm simply trying to get Fine Uploader going. I do realize that I'll have to enter a few pieces of information about my blog storage endpoint, etc. but I don't think this error is related to any of that.
A Gallery (and every higher level component of that library) needs an "uploader" props as explained in the section https://github.com/FineUploader/react-fine-uploader#high-level-components
An uploader is one of the 3 classes avaiable in the fine-uploader-wrappers package https://github.com/FineUploader/fine-uploader-wrappers#wrapper-classes
those are for upload to
Aws s3
Azure
or your enpoint
The uploader class need all the configuration endpoint, credentials, custom configuration, etc... (you can find a comprehensive list here in the api section https://docs.fineuploader.com/branch/master/api/options.html)
An example for s3 direct upload would be something like:
const uploader = new FineUploaderS3({
options: {
request: {
endpoint: "http://fineuploadertest.s3.amazonaws.com",
accessKey: "AKIAIXVR6TANOGNBGANQ"
},
signature: {
endpoint: "/vendor/fineuploader/php-s3-server/endpoint.php"
}
}
})
and use that uploader in a gallery
<Gallery uploader={ uploader } />
There are many usefull option for customization: callbacks, onEventHandler, etc you can find them all in the docs of fineuploader
Edit: if im not mistaken react-transition-group is necessary even if it's not listed anywhere in the docs...