I'm getting the error below when providing a constant with my graphql query to useQuery inside of my component.
Uncaught (in promise) Error: Invalid AST Node: undefined.
at devAssert (app.js:60958:11)
at visit (app.js:65283:130)
at Object.assign.added (app.js:59225:58)
at InMemoryCache.transformDocument (app.js:53379:101)
at QueryManager.transform (app.js:56649:42)
at QueryManager.getVariables (app.js:56681:121)
at QueryManager.watchQuery (app.js:56684:147)
at ApolloClient.watchQuery (app.js:55091:34)
at start (app.js:5304:26)
at immediate (app.js:5522:7)
My component script section looks like:
<script>
import { MY_QUERY } from "./constants/qraphql";
import {useQuery} from "#vue/apollo-composable";
export default {
setup() {
const {result, loading, error} = useQuery(MY_QUERY);
return {
result,
loading,
error
}
}
}
</script>
And my ./constants/graphql.js file looks like:
import gql from 'graphql-tag';
const MY_QUERY = gql`
query exampleQuery {
tasks {
id
name
title
text
}
}`;
Why is this happening?
Turns out I forgot to prefix export to my constant MY_QUERY. This caused the component to attempt to use a undefined constant because it failed to import.
In my ./constants/graphql.js file I have to change
const MY_QUERY
to
export const MY_QUERY
Now the error is fixed
Related
I am following the AWS SDK v3 for Javascript guide to display my DynamoDb table names.
https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/welcome.html
However, I am receiving the following error. Any help in understanding why I am receiving this error would be greatly appreciated! :-)
TypeError: Cannot read properties of undefined (reading 'ExclusiveStartTableName')
at serializeAws_json1_0ListTablesInput (C:\source\training\react\portfolio-app\finance_api\node_modules\#aws-sdk\client-dynamodb\dist-cjs\protocols\Aws_json1_0.js:3833:19)
at serializeAws_json1_0ListTablesCommand (C:\source\training\react\portfolio-app\finance_api\node_modules\#aws-sdk\client-dynamodb\dist-cjs\protocols\Aws_json1_0.js:357:27)
at serialize (C:\source\training\react\portfolio-app\finance_api\node_modules\#aws-sdk\client-dynamodb\dist-cjs\commands\ListTablesCommand.js:40:72)
at C:\source\training\react\portfolio-app\finance_api\node_modules\#aws-sdk\middleware-serde\dist-cjs\serializerMiddleware.js:12:27
at C:\source\training\react\portfolio-app\finance_api\node_modules\#aws-sdk\middleware-endpoint\dist-cjs\endpointMiddleware.js:20:16
at async C:\source\training\react\portfolio-app\finance_api\node_modules\#aws-sdk\middleware-logger\dist-cjs\loggerMiddleware.js:5:22
at async listTables (file:///C:/source/training/react/portfolio-app/finance_api/src/helper/listAWSTable.js:6:21)
at async file:///C:/source/training/react/portfolio-app/finance_api/src/helper/runAWSCommands.js:4:1
Here are the contents of the javascript file I am using to extract the list of tables, it's basically copied from the developer-guide.
NB I have substituted in my region and I have AWS credentials loaded in my VSCode.
listAWSTables.js
import { DynamoDBClient, ListTablesCommand } from "#aws-sdk/client-dynamodb";
async function listTables() {
const dbclient = new DynamoDBClient({ region: "ap-southeast-2" });
try {
const results = await dbclient.send(new ListTablesCommand());
results.Tables.forEach(function (item, index) {
console.log(item.Name);
});
} catch (err) {
console.error(err);
}
}
export { listTables };
I call it from another file "runAWSCommands.js":
runAWSCommands.js
import { listTables } from "./listAWSTables.js";
await listTables();
At the commandline I start it off using this command: node runAWSCommands.js
The error:
TypeError: Cannot read properties of undefined (reading 'ExclusiveStartTableName')
It is saying: "The ListTablesCommand cannot read a property from an input that is undefined"
If we look at the definition type of ListTablesCommand:
It expects an input value. If we look at the documentation, we can also see an input variable there.
This input object can be empty, in case you don't want to pass any configuration.
Hence, you can change the line:
const results = await dbclient.send(new ListTablesCommand());
to:
const results = await dbclient.send(new ListTablesCommand({}));
And it should work as expected.
Im trying to create a portfolio site for myself using sanity on the backend. The site is working and the DB is set up and working using Sanity studio, but I cant get it to connect properly on the backend using Next.
Here is my connection file:
import { createClient } from "next-sanity";
import createImageUrlBuilder from "#sanity/image-url";
export const client = createClient({
projectId: "p079sml5",
dataset: "production",
apiVersion: "2023-01-31",
useCdn: false,
});
I'll be hiding a lot of this in env files but for the purposes of debugging I've left the info in.
And here is one of my endpoints:
import { NextApiRequest, NextApiResponse } from "next";
import { groq } from "next-sanity";
import { client } from "sanity";
import { Social } from "./typings";
const query = groq`
*[_type == "social"]
`;
type Data = {
socials: Social[];
};
export default async function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
const socials: Social[] = await client.fetch(query);
res.status(200).json({ socials });
}
As per the title, when trying to make the call on http://localhost:3000/api/getSocials, I get the following error: error - TypeError: Cannot read properties of undefined (reading 'fetch')
at handler (webpack-internal:///(api)/./src/pages/api/getSocials.ts:15:70)
Fetch appears on the autofill, along with the other methods, so it would appear that its been imported "correctly". The error suggests that that its the client that is the issue but cant figure out why.
Thanks in advance
Ive tried, using my dev environment, with the associated project id etc but no joy.
UPDATE: Fixed, I just moved the client file into a different folder, and it worked
Follow this doc https://github.com/vercel/next.js/tree/canary/examples/cms-sanity
Or setup this repo in new folder and update it's config (/lib/config.js) file with your sanity details then check... previously it was worked for me.
My Problem
The nextjs documentation on mdx states that it does not support frontmatter. Instead it is suggested to create a constant and export it [1]. However I can't seem to get at data exported in such a way. For instance using the following
/* -- ./pages/example.mdx -- */
export const meta = {
title: 'some example title'
}
/* -- ./pages/index.js -- */
import Example from './example.mdx';
export default function Index ({ ... props }) {
return <Example />
}
It seems that what gets imported can be used as a react component, but there does not seem to be a reference to the meta property anywhere.
Example does not have a meta property
import { meta } from './example.mdx does not yield anything
There is no meta key on the rendered components
Using require ('./example.mdx') yields the same results.
What I wanted to do
I have a list of markdown files and want to create an overview page that lists all of them, using the metadata defined in every file. Something akin to the following
import fs from 'fs/promises';
import path from 'path';
export async function getStaticProps () {
const root = path.join (process.cwd (), 'pages/items');
const listing = await fs.readdir(root);
const items = listing
.filter (item => item.endsWith ('.mdx'))
.map (item => {
const meta = require (`./items/${item}`).meta;
const id = item.replace (/\.md$/, '');
return { id, ... meta }
});
return { props: { items } };
}
export default function Overview ({ items, ... props }) {
/* ... use items */
}
Edit
It seems like there is a big difference between using .md and .mdx. In the examples I gave here I used .mdx, but locally I had used .md. Switching extensions makes everything work.
It is strange that the extension makes such a difference even though both of them are configured in next.config.js
const withMDX = require ('#next/mdx') ({
extension: /\.mdx?$/
});
module.exports = withMDX ({ /* ... */ });
[1] https://nextjs.org/docs/advanced-features/using-mdx#frontmatter
Use .mdx extension instead of a .md extension.
Seems like you can create a typing file to import it if you are using typescript
Step 1 - Create typing file
declare module '*.mdx' {
export const meta: {
title: string
}
}
Step 2 - import the exported content
import Example, {meta} from './example.mdx';
Got the answer from here https://gist.github.com/peterblazejewicz/1ac0d99094d1886e7c9aee7e4faddef3#file-index-d-ts-L68
I am trying to correctly type a react component with flow and apollo graphql. I keep getting a flow error message. I am using react-apollo 2.0.1 and flow 0.53.1
// #flow
/**
*
* CompanyName
*
*/
import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import type { OperationComponent, ChildProps } from 'react-apollo';
type Company = {
id: string,
name: string,
};
type Response = {
company: Company,
};
type Props = {
className: ?string,
};
class CompanyName extends React.Component<ChildProps<Props, Response>> {
render() {
return (
<span className={this.props.className}>
{!!this.props.data.company && this.props.data.company.name}
</span>
);
}
}
const query = gql`
query {
company {
id
name
}
}
`;
const withCompanyName: OperationComponent<Response, Props> = graphql(query);
export default withCompanyName(CompanyName); // this line gives a flow error
I get an error on the last line of code saying that the type is incompatible. Everything else validates correctly.
The error message is: CompanyName (class type: CompanyName) This type is incompatible with StatelessComponent (union: type application of polymorphic type: type StatelessComponent | class type: type application of identifier React$Component)
I am able to get it to work properly if I change it to a stateless functional component, but I need to get this working for class components.
Update:
Here is my .flowconfig
[ignore]
[include]
[libs]
[options]
module.name_mapper='.*\(.gql\)' -> 'empty/object'
I am using the empty package to prevent gql imports from causing a flow error.
I am trying to get access to objects using import, but am struggling with the logic:
schemas.js:
import { SimpleSchema } from 'meteor/aldeed:simple-schema';
export default UsersExtraSchema = new SimpleSchema({
...
}
seed.js:
import '/imports/startup/server/schemas.js';
export default class SeedDB {
loadBaseData() {
....
UsersExtraSchema.validate(attr);
...
}
}
I am getting the error:
TypeError: Object [object Object] has no method 'validate'
at SeedDB.loadBaseData (imports/startup/server/seed.js:19:26)
at server/main.js:11:14
at /tidee/app/tidee-meteor/.meteor/local/build/programs/server/boot.js:290:5
Exited with code: 8
Your application is crashing. Waiting for file change.
Why do not you import like this?
import UsersExtraSchema from '/imports/startup/server/schemas.js';