Skip to content

Instantly share code, notes, and snippets.

Avatar

Helielson helielson

  • Indaband, Frontend Bahia
  • Salvador, Brazil
View GitHub Profile
View TaskDetail.js
import { useNavigationParam } from 'react-navigation-hooks';
import { graphql, usePreloadedQuery } from 'react-relay/hooks';
const query = graphql`
query TaskDetailQuery($nodeId: ID!) {
task: node(id: $nodeId) {
... on Task {
title
}
}
@helielson
helielson / responsive.css
Last active Apr 15, 2022
Boilerplate CSS Media Queries
View responsive.css
* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
View import_json_appsscript.js
/**
* Retrieves all the rows in the active spreadsheet that contain data and logs the
* values for each row.
* For more information on using the Spreadsheet API, see
* https://developers.google.com/apps-script/service_spreadsheet
*/
function readRows() {
var sheet = SpreadsheetApp.getActiveSheet();
var rows = sheet.getDataRange();
var numRows = rows.getNumRows();
View hook.js
import useLazyLoadQuery from 'react-relay/lib/relay-experimental/useLazyLoadQuery';
function Component () {
const { root } = useLazyLoadQuery(ScreenAQuery, null, {
fetchPolicy: 'store-or-network',
});
...
}
View components.js
import RelayEnvironmentProvider from 'react-relay/lib/relay-experimental/RelayEnvironmentProvider';
import useLazyLoadQuery from 'react-relay/lib/relay-experimental/useLazyLoadQuery';
// ScreenA
function ScreenA() {
const { root } = useLazyLoadQuery(ScreenAQuery, null, {
fetchPolicy: 'store-or-network',
});
return (
<RelayEnvironmentProvider environment={environment}>
View environment.js
import RelayDefaultMissingFieldHandlers from 'relay-runtime/lib/handlers/RelayDefaultMissingFieldHandlers';
import missingHandlerByRefConcreteTypeField from './missingHandlerByRefConcreteTypeField';
const store = new Store(new RecordSource());
const network = Network.create(fetchQuery);
const environment = new Environment({
network,
store,
missingFieldHandlers: [
View MissingFieldHandlers.js
const missingHandlerByRefConcreteTypeField: MissingFieldHandler = {
kind: 'linked',
handle(field, _, argValues) {
try {
const argsString =
field.args && field.args.length
? `{${field.args.map(a => `"${a.name}":"${argValues[a.name]}"`).join(',')}}`
: null;
const idValue = [field.concreteType, argsString].filter(v => !!v).join(':');
View relay-store.js
const id = base64Encode('Event:{"eventId":1}');
const key = `${id}:title`;
const storeRecord = {
[key]: "My event",
};
View result.json
{
"events": {
"edges": [{
"node": {
"eventId": 1,
"title": "My event"
}
}]
}
}
View ScreenBDetail.js
// ScreenBDetail
const ScreenBDetailQuery = graphql`
query ScreenBDetailQuery {
root {
event(id: $someId) {
title
}
}
}
`;