TLDR; managed to pull up a codesandbox with the issue, please have a look here.
things were working fine while using react-apollo 2.5, now we have started the process of migrating to 3.0.
snapshot of the relevant portion of my package.json
"#apollo/client": "^3.0.0-beta.19",
"#apollo/react-components": "^3.1.3",
"#apollo/react-hoc": "^3.1.3",
Now I am getting the below error
Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>.
The outermost component of my App is indeed the ApolloProvider,
the way I import ApolloProvider after migration is shown below
import { ApolloProvider } from "#apollo/client";
also I have taken care to import the withApollo hoc from "#apollo/react-hoc" as mentioned in migration docs.
Isn't migration just changing the versions in package.json and imports? or is there anything specific I need to know when creating the apollo client instance?
Please find below, the code used for creating client instance
import { ApolloClient, HttpLink, InMemoryCache } from '#apollo/client';
const cache = new InMemoryCache();
const client = new ApolloClient({
link: new HttpLink({
uri: process.env.REACT_APP_GRAPHQLURL,
}),
cache,
connectToDevTools: true
});
According to the migration docs, you shouldn't import withApollo hoc from #apollo/react-hoc
You should use hoc package from #apollo/client
import { withApollo } from "#apollo/client/react/hoc";
https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/#apolloreact-hoc-and-apolloreact-components
Related
vue3 project that use firebase notification,
When I moved from MIX to Vite I find this issue
[vite]: Rollup failed to resolve import "firebase/app" from "resources/js/firebase.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "firebase/app" from "resources/js/firebase.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
my app.js like the following:
import {messaging, token} from "./firebase";
and my firebase.js:
import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";
const firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXX_XXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXX-XXXXXXXXXXX.XXXXXXX.XXX",
projectId: "XXXXXXXXX-XXXXX",
storageBucket: "XXXXXXXXXX.XXXXXXXXXx.XXX",
messagingSenderId: "XXXXXXXXXXXXXXX",
appId: "X:XXXXXXXXXXXXXX:XXX:XXXXXXXXXXXXXXXXXXXXX",
measurementId: "X-XXXXXXXXXXXX"
}
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Firebase Cloud Messaging and get a reference to the service
export const messaging = getMessaging(app);
export const token = getToken;
export default messaging;
Any help to fix this issue.
I am working on best practices for folder structure on an apollo-graphql project. Right now I have a graphql folder that contains both a Resolvers and Schema Folder, this is to keep everything separate. However, Within my Resolvers folder I want a new Typescript file for each Typedef. (See photo)
[![enter image description here][2]][2]
However, in my Index file I put in this
/src/graphql/resolvers/index.ts
export *from "./Category"
export * from "./Product"
However, I get the following error
"./Category" has already exported a member named 'resolvers'. Consider explicitly re-exporting to resolve the ambiguity."
What is the best way to approach this issue so that I can have everything separated out, but still only have to import one line into my ApolloServer
src/index.ts
import { ApolloServer } from 'apollo-server'
import { context } from './graphql/context'
import {typeDefs} from "./graphql/Schema/index"
import {resolvers} from "./graphql/resolvers/index"
new ApolloServer({ resolvers, typeDefs, context: context }).listen(
{ port: 4000 },
() =>
console.log(`
🚀 Server ready at: http://localhost:4000`))
Can someone help me understand if there is a way to configure open Telemetry on the client side for react and vanilla JS projects all I want to do is to console the traces of fetch call that are being made from the browser.
Most of the documentation I see is only for nodejs. Pls pinpoint a documentation if there are any?
The documentation gives a common guide for Javascript. What you do for you React would be same as what you do for Node.js or even simple JS scripts.
Just follow the documentation. Create and export a tracer:
import { ZoneContextManager } from '#opentelemetry/context-zone';
import { registerInstrumentations } from '#opentelemetry/instrumentation';
import { DocumentLoadInstrumentation } from '#opentelemetry/instrumentation-document-load';
import { FetchInstrumentation } from '#opentelemetry/instrumentation-fetch';
import { UserInteractionInstrumentation } from '#opentelemetry/instrumentation-user-interaction';
import { XMLHttpRequestInstrumentation } from '#opentelemetry/instrumentation-xml-http-request';
import { ConsoleSpanExporter, SimpleSpanProcessor } from '#opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '#opentelemetry/sdk-trace-web';
const setupTracer = () => {
const provider = new WebTracerProvider();
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.register({
// Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
contextManager: new ZoneContextManager(),
});
// Registering instrumentations
registerInstrumentations({
instrumentations: [
new DocumentLoadInstrumentation(),
new UserInteractionInstrumentation(),
new XMLHttpRequestInstrumentation(),
new FetchInstrumentation()
],
});
}
export default setupTracer;
Import the tracer like this in your app's entry point (usually index.js):
setupTracer();
ReactDOM.render(<App />, document.getElementById('root'));
I have User and Post typeDefs/resolvers I want to separate them so I can get
User.schema.js
User.resolver.js
Post.schema.js
Post.resolver.js
link.Schema.js
link.resolvers.js
how to do this and merge them to get just one typeDefs/resolvers to pass it to
const server = new ApolloServer({
typeDefs,
resolvers
});
I have been using the merge-graphql-schemas package for the type definition and lodash deep object merge function for the resolvers like so:
import merge from "lodash/merge"
import { mergeTypes } from "merge-graphql-schemas"
import UserSchema from "./User.schema"
import UserResolvers from "./User.resolvers"
import PostSchema from "./Post.schema"
import PostResolvers from "./Post.resolvers"
import LinkSchema from "./Link.schema"
import LinkResolvers from "./Link.resolvers"
const typeDefs = mergeTypes([UserSchema, PostSchema, LinkSchema])
const resolvers = merge(UserResolvers, PostResolvers, LinkResolvers)
const server = new ApolloServer({
typeDefs,
resolvers
});
EDIT: please note that graphql-tools's mergeSchemas is now the recommended way of schema stitching with apollo server now.
There is no need for some more dependency for merging the types, as graphql-tools are fine for them.
Have a look https://github.com/techyaura/graphqlNodeMongodb-server/tree/master/src/gql, if it helps.
I have two files todo.types.js & user.type.js in the repo https://github.com/techyaura/graphqlNodeMongodb-server/tree/master/src/gql/types & I am simply concatenating them & that's working fine.
NOTE: I am not using APOLLO GRAPHQL, instead using express-graphql simply
I'm trying to use the react material-ui theme having installed it from npm, I get the following errors when I include 'import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";' in boot-client.tsx:
TS7016: Could not find a declaration file for module
'material-ui/styles/MuiThemeProvider'.
'W:/web/WebFront/node_modules/material-ui/styles/MuiThemeProvider.js'
implicitly has an 'any' type. Try npm install
#types/material-ui/styles/MuiThemeProvider if it exists or add a new
declaration (.d.ts) file containing declare module
'material-ui/styles/MuiThemeProvider';
I've tried both suggestions to no avail including running the command: npm install -D #types/material-ui.
My #types folder in node_modules exists with the relevant types.
Here is the code where I'm trying to use it:
import './css/site.css';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './configureStore';
import { ApplicationState } from './store';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
const history = createBrowserHistory({ basename: baseUrl });
// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = (window as any).initialReduxState as ApplicationState;
const store = configureStore(history, initialState);
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
// and injects the app into a DOM element.
ReactDOM.render(
,
document.getElementById('react-app')
);
}
renderApp();
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}
Ok I figured it out, in tsconfig.json under 'compilerOptions' visual-studio by default had its types set to ["webpack-env"], I needed to add "material-ui" to it or optionally just remove it: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Use the default import from the same path.
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
The solution that worked for me which is med's answer above which I explain in more detail below.
Open the tsconfig.json file. Add "types":"material-ui", within "compilerOptions": {}
as in
"compilerOptions": {"types":"material-ui"}