today I tried to use Airtable in GraphQL, however, it does not show in graphql.
I added the package with yarn, then I updated the gatsby-config file with the code below:
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
{
plugins: [
resolve: `gatsby-source-airtable`,
options: {
apiKey: process.env.GATSBY_AIRTABLE_API,
concurrency: 5,
tables: [
{
baseId: process.env.GATSBY_AIRTABLE_BASE_ID,
tableName: `Projects`,
mapping: {image:`fileNode`}
}
]
}
],
}
On top of that I cleaned gatsby cache and started gatsby develop with sudo command. Still allAirtable is not showing in the graphiQL 😑
Related
UPDATE: I installed Strapi version 3.6.3 and it works well
Strapi - Clouinary connection do not work for me. So I'm uploading pictures to Stapi, but they don't appear in Clouinary.
In config folder I created file plugins.js with following content:
module.exports = ({
env
}) => ({
// ...
upload: {
provider: 'cloudinary',
providerOptions: {
cloud_name: env('CLOUDINARY_NAME'),
api_key: env('CLOUDINARY_KEY'),
api_secret: env('CLOUDINARY_SECRET'),
},
},
// ...
});
I have installed npm i strapi-provider-upload-cloudinary
then changed file .env to
PORT=1337
CLOUDINARY_NAME="***"
CLOUDINARY_KEY="***"
CLOUDINARY_SECRET="***"```
Actually automatically following code added automatically:
```JWT_SECRET=*********
API_TOKEN_SALT=*********
JWT_SECRET=*********
What could be a problem?
should CLOUDINARY_SECRET be in "quotes"? or in 'quotes' or without quotes?
Terminal output after adding image is following:
http://localhost:1337
[2021-12-07 02:10:14.702] http: POST /upload (261 ms) 200
[2021-12-07 02:10:14.744] http: GET /upload/files?sort=updatedAt:DESC&page=1&pageSize=10 (24 ms) 200
[2021-12-07 02:10:14.758] http: GET /uploads/thumbnail_Screenshot_2021_11_26_130226_11a95e81ea.png?width=1504&height=1258 (4 ms) 200
All permissions seems to be set...
Also created extentions/upload/config/setting.json with the following content:
"provider": "cloudinary",
"providerOptions": { "cloud_name":"devert0mt",
"api_key": "***",
"api_secret":"***"
}
}{
"provider": "cloudinary",
"providerOptions": { "cloud_name":"devert0mt",
"api_key": "***",
"api_secret":"***"
}
}```
If you want to use the latest version of Strapi, v.4 and above, you need to change strapi provider package to this one:
npm install #strapi/provider-upload-cloudinary --save
Then, you need to update your plugins.js file in config/plugins.js to the following ( Be aware that it has a slightly different structure than the previous package - everything is placed in config object, instead of upload like it was on a previous version):
module.exports = ({ env }) => ({
// ...
upload: {
config: {
provider: 'cloudinary',
providerOptions: {
cloud_name: env('CLOUDINARY_NAME'),
api_key: env('CLOUDINARY_KEY'),
api_secret: env('CLOUDINARY_SECRET'),
},
actionOptions: {
upload: {},
delete: {},
},
},
},
// ...
});
Also, if you are having issues with properly rendering your images on your Strapi dashboard you can update middlewares.js in config/middlewares.js:
Instead of 'strapi::security' in module.exports, paste this:
// ...
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
'media-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
upgradeInsecureRequests: null,
},
},
},
},
// ...
I load my GraphQL schema like:
const schema = loadSchemaSync('./src/graphql/server/schema/*.gql', {
loaders: [new GraphQLFileLoader()],
})
This works fine locally, however, when deploying to vercel I get the error:
Unable to find any GraphQL type definitions for the following pointers:
- ./src/graphql/server/schema/*.gql
I think this is because vercel is dropping the relevant files after build?
The problem is that you cannot use dynamic loaders in Vercel Serverless Functions.
A workaround for this problem is to use a inline GraphQL schema.
// src/graphql/schema.ts
import { gql } from "apollo-server-core";
export default gql`
type Query {
greet: String!
}
`;
// src/pages/api/graphql.ts
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";
import Schema from "../../graphql/schema";
const apolloServer = new ApolloServer({
typeDefs: Schema,
resolvers,
plugins: [ApolloServerPluginLandingPageGraphQLPlayground],
introspection: true,
});
If you are using tools like codegen:
// codegen.ts
import { CodegenConfig } from "#graphql-codegen/cli";
const config: CodegenConfig = {
schema: "src/graphql/schema.ts",
documents: ["./src/**/*.{ts,tsx}"],
ignoreNoDocuments: true,
generates: {
"src/graphql/types/server.ts": {
plugins: [
"#graphql-codegen/typescript",
"#graphql-codegen/typescript-resolvers",
],
},
"src/graphql/types/client/": {
preset: "client",
plugins: [],
},
},
};
export default config;
I am new to vueppress.
I followed the docs here to create a documentation site. things went well but the search field/input didn't show up. I tried to follow the plugin installation docs here but I got:
I need to install #vuepress/shared-utils
after that I had to install #vue/component-compiler-utils too
but was unable to see the search input. I also tried to add the following to my ./docs/.vuepress/config.ts but still no luck.
plugins: [
[
'#vuepress/plugin-search',
{
searchMaxSuggestions: 10
}
],
]
I don't want to use Algoia search as this is internal documentation.
I had the same issue. Everything was working except the search box was not visible.
The issue was that my ...docs/.vuepress/config.ts was not structured properly. To fix it I followed exactly what the VuePress documentation instructed.
The working config.ts structure
import { defaultTheme } from '#vuepress/theme-default'
import { searchPlugin } from '#vuepress/plugin-search'
module.exports = {
theme: defaultTheme({
...
}),
plugins: [
searchPlugin({
...
})
]
}
Currently I am using VuePress v2.0.0-beta.45
and I used the following to install what I needed:
npm i -D #vuepress/plugin-search#next
npm i -D #vuepress/plugin-register-components#next
Detailed config.ts that is working for me
import { path } from '#vuepress/utils'
import { defaultTheme } from '#vuepress/theme-default'
// Plugins
import { searchPlugin } from '#vuepress/plugin-search'
import { registerComponentsPlugin } from '#vuepress/plugin-register-components'
import navBarItems from './public/navbar'
import sideBar from './public/sidebar'
// SEE: https://v2.vuepress.vuejs.org/reference/default-theme/config.html#config
module.exports = {
// Site Config: https://v2.vuepress.vuejs.org/reference/config.html#site-config
lang: 'en-US',
title: 'Title on Tab and Navbar',
description: '',
// https://v2.vuepress.vuejs.org/reference/default-theme/config.html
theme: defaultTheme({
logo: 'logo-light.png',
logoDark: 'logo-dark.png',
//https://v2.vuepress.vuejs.org/reference/default-theme/config.html#navbar
navbar: navBarItems,
// https://v2.vuepress.vuejs.org/reference/default-theme/config.html#sidebar
sidebar: sideBar
}),
plugins: [
// https://v2.vuepress.vuejs.org/reference/plugin/register-components.html
registerComponentsPlugin({
componentsDir: path.resolve(__dirname, './components')
}),
// https://v2.vuepress.vuejs.org/reference/plugin/search.html#search
searchPlugin({
// getExtraFields: (page) => page.frontmatter.tags,
maxSuggestions: 15,
hotKeys: ['s', '/'],
locales: {
'/': {
placeholder: 'Search',
}
}
})
],
}
Note that I keep my sidebar array and navbar object in different files.
Also I couldn't find any TypeScript reference for the config in VuePress 2x
So I'm getting a routing problem whenever I use nuxt ssr with serverless. When I use either deploy to AWS lambda or use serverless-offline it generates the url prefixed with /{stage}, but nuxt can't seem to handle this and either throws 403, 404 or 500 errors because the routes to static files aren't prefixed with /{stage}.
I have tried adding {stage} to the public path on build, the results in a 404 because now the static file path needs to prefixed with another /{stage}. If I go directly to {stage}/{stage}/_nuxt/{file} it works.
build: {
publicPath: '/{stage}/_nuxt'
}
So looking around I found that I can update the router base to the below
router: {
base: '/{stage}'
}
but now the file only loads if its {stage}/{stage}/{stage}/_nuxt/{file} and removing the publicPath code above doesn't make it work either.
And this is for the static files, when it comes to the actual routes the homepage set at '/' either works but any other pages don't because the nuxt-links to them aren't prefixed with /{stage} or if I add the prefix to the base I get a Cannot GET / error when I visit /{stage}.
I have tried many different ways of doing this such as using express however I have had no luck and any tutorials that I found online are at least 2 years old and the github repos have the same problem. The closest thing I have found on stackoverflow that is somewhat similar to what I have is here but this is for a static site.
Anybody have any ideas? Below is the code for the serverless.yaml, handler.js, nuxt.js, nuxt.config.js.
Github Repo
serverless.yaml
service: nuxt-ssr-lambda
provider:
name: aws
runtime: nodejs12.x
stage: ${env:STAGE}
region: eu-west-1
lambdaHashingVersion: 20201221
environment:
NODE_ENV: ${env:STAGE}
apiGateway:
shouldStartNameWithService: true
functions:
nuxt:
handler: handler.nuxt
events:
- http: ANY /
- http: ANY /{proxy+}
plugins:
- serverless-apigw-binary
- serverless-dotenv-plugin
- serverless-offline
custom:
apigwBinary:
types:
- '*/*'
handler.js
const sls = require('serverless-http')
const binaryMimeTypes = require('./binaryMimeTypes')
const nuxt = require('./nuxt')
module.exports.nuxt = sls(nuxt, {
binary: binaryMimeTypes
})
nuxt.js
const { Nuxt } = require('nuxt')
const config = require('./nuxt.config.js')
const nuxt = new Nuxt({ ...config, dev: false })
module.exports = (req, res) =>
nuxt.ready().then(() => nuxt.server.app(req, res))
nuxt.config.js
module.exports = {
telemetry: false,
head: {
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
],
plugins: [
],
components: true,
buildModules: [
'#nuxtjs/tailwindcss',
],
modules: [
],
router: {
base: '/prod'
},
build: {
}
}
Are you passing it as
<p>Path: {{ $route.path }}</p>
<NuxtLink to="/">Back to Mountains</NuxtLink>
if Yes then it should work else try going with redirect('/{stage}/_nuxt')
for an if statement put this inside else , I think it should work.
I have a gatsby-theme React application that uses gatsby-source-graphql to fetch the data from my back-end application. I had set the refetchInterval: 20 in my gatsby-config.js file. My gastby-config.js file is as below
module.exports = {
siteMetadata: {
title: 'Gatsby Theme Mytheme',
...
},
pathPrefix: `/gtm`,
plugins: [
{
...
...
{
resolve: `gatsby-source-graphql`,
options: {
fieldName: `cms`,
url: `http://127.0.0.1:7000/api/graphiql`,
typeName: `CMSData`,
refetchInterval: 20,
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
};
When I run the application in the development mode (gatsby develop) I'm able to see (console.log) the changes made in the back-end CMS application after an interval of 20 seconds. But the changes are not able to see/display on the build (gatsby build). Therefore after the build, whatever I change in the backed it is not reflected in my front-end application. So how can I fetch the changes from the back-end application for my a gatsby build dynamically?
The component I use to fetch the back-end GraphQL data is given as
import { useStaticQuery, graphql } from "gatsby";
export function myComponent() {
const cmsMenu = useStaticQuery(graphql`
{
cms {
allMenus {
edges {
node {
menuName
}
}
}
}
}
`)
console.log("CMS menu from MenuProvider", cmsMenu);
}