file upload in react.js using apollo client - reactjs

i was trying to upload file to my apollo server but i can't upload any file and it does not throw any error but i receive only empty object in resolver and it works find when i use GraphQL Client like Altair
output in server when using Altair Client
{
filename: 'Copy of Massive Orange Summer Sale Animated-300x250px-MediumRectangle.png',
mimetype: 'image/png',
encoding: '7bit',
createReadStream: [Function: createReadStream]
}
output in server when using #apollo/client package
{}
client code
server code

Uploads are not supported in Apollo Client by default. If you want to enable them, you need to use createUploadLink from apollo-upload-client as shown here.
import { createUploadLink } from 'apollo-upload-client';
const client = new ApolloClient({
cache: new InMemoryCache(),
link: createUploadLink(),
});

Related

Upload a file using React and Express

i want to upload a zip file from a client to my server. On my client side i have adapt the code from this site. In my express server i notice that my request is
req.files: { file:
{ fieldName: 'file',
originalFilename: 'myZIP.zip',
path: '/tmp/myPath',
headers:
{ .....},
size: 11757,
name: 'myZIP.zip',
type: 'application/zip' } }
Is there any way to upload my file without give the path of the file /tmp/... ? Or this is the only way that uploads works in general?

AWS Amplify, Amazon Lex v2 and React Native - Error: No value provided for input HTTP label: sessionId

I have difficulties integrating a Amazon Lex v2 chatbot on a React Native app using Amazon Amplify.
I installed aws-amplify dependencies, and on my index.js file added the following lines:
import {Amplify} from 'aws-amplify';
import {AWSLexV2Provider} from '#aws-amplify/interactions';
Amplify.addPluggable(new AWSLexV2Provider());
const interactionsConfig = {
Auth: {
identityPoolId: 'XX-XXXX-X:………',
region: 'east-us-1',
},
Interactions: {
bots: {
// LexV2 Bot
MyChatbotName: {
name: 'MyChatbotName',
aliasId: '---',
botId: '---',
localeId: '---',
region: '---',
providerName: 'AWSLexV2Provider',
},
},
},
};
Amplify.configure(interactionsConfig);
I can call my chatbot using Python Boto3, so all the data I put in interactionsConfig.Interactions.bots should be okay.
But when I try to call my chatbot on App.tsx, with the following code:
async function callChatbot() {
let userInput = 'I would like to have informations about a disease';
// Provide a bot name and user input
const response = await Interactions.send('MyChatbotName', userInput);
// Log chatbot response
console.log(response.message);
}
callChatbot();
I got an error:
WARN Possible Unhandled Promise Rejection (id: 0):
Error: No value provided for input HTTP label: sessionId.
Error: No value provided for input HTTP label: sessionId.
I suppose this is an identification issue, but the identity pool I use is supposed to have full Lex, Amplify and Cognito access…
I changed many settings in identity pool, I even tried to add user pool but still the same error… I already installed react-native-url-polyfill, react-native-get-random-values and uuid to get rid of previous errors.
Do you know what I should do? Thanks! :)

What is the difference between SchemaLink and HttpLink for ApolloClient?

For ApolloClient we can use either SchemaLink or HttpLink.
Is there any advantage for using one or other?
// SchemaLink
function createLink() {
const { SchemaLink } = require('#apollo/client/link/schema')
const { schema } = require('../server/schema')
return new SchemaLink({ schema })
}
// HttpLink
function createLink() {
const { HttpLink } = require('#apollo/client/link/http')
return new HttpLink({
uri: '/api/graphql',
credentials: 'same-origin'
}
// ApolloClient
function createApolloClient() {
return new ApolloClient({
link: createLink(),
cache: new InMemoryCache()
})
}
The HttpLink is forwarding GraphQL queries through a HTTP POST request to the provided endpoint uri.
The SchemaLink, well, the documentation explains what it does:
The schema link provides a graphql execution environment, which allows you to perform GraphQL operations on a provided schema. This type of behavior is commonly used for server-side rendering (SSR) to avoid network calls and mocking data.
So while the HttpLink is used to hit a distant GraphQL server through the network (usually, in a client application context), the SchemaLink is used when the server is available locally, where we can import the schema in the same source as a server-side project, like in your example snippet.
Is there any advantage for using one or other?
They're meant for different use-cases, while nothing stops you from doing HTTP calls on the server to an endpoint on the same server (e.g. localhost), using the schema link to query a local schema might be better depending on the project's architecture (Is the GraphQL server deployed to an external host where the schema wouldn't be available locally? etc.)
They could also both be used, e.g. HttpLink on the browser side and SchemaLink for server-side rendering of the same React application.

Websockets, truffle, ganache and react setup issues connection not open on send()

Sometimes I refresh, and it works. Sometimes it just doesn't work.
I tried changing ganache GUI settings to use port 8545 which I read is the WebSockets port but it still won't connect. ws:127.0.0.1 won't work and neither will http://
This is my truffle config file. The rest of the code is large and won't help much.
// See <http://truffleframework.com/docs/advanced/configuration>
// #truffle/hdwallet-provider
// var HDWalletProvider = require("truffle-hdwallet-provider");
const path = require("path");
var HDWalletProvider = require("#truffle/hdwallet-provider");
module.exports = {
// See <http://truffleframework.com/docs/advanced/configuration>
// to customize your Truffle configuration!
// contracts_directory: "./allMyStuff/someStuff/theContractFolder",
contracts_build_directory: path.join(__dirname, "/_truffle/build/contracts"),
// migrations_directory: "./allMyStuff/someStuff/theMigrationsFolder",
networks: {
ganache: {
host: "127.0.0.1",
port: 7545,
//port: 8545,
network_id: 5777,
//network_id: "*", // Match any network id,
websockets: false, // websockets true breaks TODO: connection not open on send()
// wss
},
},
};
This is some of my code on the actual screen in question.
const options = {
web3: {
block: false,
fallback: {
type: 'ws',
//url: 'ws://127.0.0.1:8546',
url: 'http://127.0.0.1:7545',
},
},
contracts: [MyStringStore],
// polls: {
// accounts: IntervalInMilliseconds,
// },
events: {},
};
I don't understand why sometimes it works and I can see drizzle state and sometimes I can't. React native and web3 is very new to me.
I get errors like this:
00:06 Contract MyStringStore not found on network ID: undefined
Error fetching accounts:
00:06 connection not open
I am having real difficulty setting up drizzle as well. One thing I see is that your
url: 'http://127.0.0.1:7545',
For some reason Drizzle only works with 'ws' as the prefix for such a URL. I am trying to follow this guide by people who got it working.
I think websocket is only available in the command line version.
Try install and use ganache-cli instead of the gui version.

From where does Relay fetch the Schema of GraphQL?

I am having a running GraphQL based server and I am able to test it properly using GraphiQL. But I am unable to understand the implementation of Relay.
As GraphQL is on the server side, then how its schema is transferred to relay over network layer at the client end? Or how it is pointing to the same GraphQL?
It takes a little extra work. Basically you have to dump a serialized version of the schema to a file on the server side, and then move that file over to the client and include it during babel compilation. Facebook has a babel plugin that takes this file and builds it into the bundle in order for Relay to know about the schema.
EDIT: here is a snippet for how to dump the schema file to JSON
import { graphql } from 'graphql'
import { introspectionQuery, printSchema } from 'graphql/utilities'
/*
generates json of our schema for use by relay
*/
export default function (schema) {
return new Promise((resolve, reject) => {
graphql(schema, introspectionQuery).then(result => {
if (result.errors) {
console.error(`ERROR introspecting schema: ${result.errors}`)
reject(new Error(result.errors))
} else {
resolve({ json: result, graphql: printSchema(schema) })
}
})
})
}
After you obtain that, you have to npm install babel-relay-plugin and include that in your babel plugins (probably in the webpack config, if you're using that).

Resources